Как встроить тег скрипта в компонент Angular - PullRequest
Новая
       127

Как встроить тег скрипта в компонент Angular

0 голосов
/ 30 мая 2020

У меня есть сайт на Angular / Typescript. Мне нужно встроить сторонний скрипт. Скрипт генерирует таблицу.

Как я могу отобразить эту таблицу внутри home.component. html. Не в начале или в начале, а внутри. Вот так.

Мне удалось встроить скрипт, но похоже, что скрипт не выполняет рендеринг, поэтому он просто отображает его в исходном коде, но не отображает таблицу.

Обновление

Таблица теперь может отображаться, но только за пределами app- root. Он должен находиться внутри home.component. html. Исходное изображение

home.component.ts 

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { DOCUMENT } from '@angular/common'

declare var myExtObject: any;

@Component({
  selector: 'app-careers',
  templateUrl: './careers.component.html',
  styleUrls: ['./careers.component.scss']
})

export class CareersComponent implements OnInit {
  private iife: any

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.iife = myExtObject()
  }

}

домашний. Компонент. html

<div id="BambooHR">
    <script src="https://xxxxxxx.xxx.com" type="text/javascript"></script>
    <div></div>
</div>

Код сценария приведен ниже. У меня это во внешнем. js файле. 

var myExtObject = function() {

	//add css file to dom so IE8 recognizes it
	document.write('<link href="https://xxx.css" rel="stylesheet" />');

	var divId="BambooHR-ATS";
	var el=document.getElementById(divId);
	if(!el) {
		document.write("<div id=\""+divId+"\"></div>");
	}

	var xmlhttp;
	var ieFlag = 0;
	if (('XDomainRequest' in window && window.XDomainRequest !== null) && document.documentMode < 10) {
		xmlhttp=new XDomainRequest();
		ieFlag = 1;
	} else if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	} else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	var embedUrl = "https://xxx.php";

	var departmentId = "0";

	if (departmentId) {
		embedUrl += '?departmentId=' + encodeURIComponent(departmentId);
	}

	document.addEventListener('readystatechange', function(event) {
		if (event.target.readyState === "complete") {
			if (ieFlag == 1) { //needed for IE9 CORS
				xmlhttp.onload = loadd;
				xmlhttp.open("GET",embedUrl);
				xmlhttp.send();

			} else {
				xmlhttp.onreadystatechange=function() {
					if(xmlhttp.readyState==4 && xmlhttp.status==200) {

						var content = xmlhttp.responseText;
						var footerId="BambooHR-Footer";
						var fel=document.getElementById(footerId);

						el=document.getElementById(divId);

						if(el && !fel) {
							content += "<div id="xxx"/></a></div>";
						}

						if(el) el.innerHTML=content;
					}
				}

				xmlhttp.open("GET",embedUrl,true);
				xmlhttp.send();
			}
		}
	});

	function loadd() { //needed for IE9 CORS
		var content = xmlhttp.responseText;
		var footerId="BambooHR-Footer";
		var fel=document.getElementById(footerId);

		el=document.getElementById(divId);

		if(el && !fel) {
			content += "<div id=\"BambooHR-Footer\">Powered by <a href=\"http://www.bamboohr.com\" target=\"_blank\" rel=\"external\"><img src=\"https://resources.bamboohr.com/images/footer-logo.png\" alt=\"BambooHR - HR software\"/></a></div>";
		}
		el.innerHTML=content;
	}
};

Ответы [ 2 ]

2 голосов
/ 30 мая 2020

Не вставляйте тег скрипта вручную. Импортируйте библиотеку в свой angular.json, в раздел scripts: 

"scripts": [
  "./node_modules/yourtablelibrary/build/yourtablelibrary.min.js"
]

Ссылка: https://medium.com/@clintpitzak / how-to-use-external- javascript -libraries-in- angular -8-247baacbdccf

0 голосов
/ 30 мая 2020

Все сценарии выполняются при загрузке страницы, <script> тег, добавленный в dom после загрузки страницы, не выполняется

В результате встраивание тега сценария не загружает содержимое файл сшивает angular не перезагружает страницу.

Решение состоит в том, чтобы заставить компонент реализовывать интерфейс AfterInit и динамически импортировать скрипт в метод ngAfterInit, подобный этому 

ngAfterInit() {
   import('./myfile.js')
  }

Предполагается, что загружаемый скрипт - это myfile. js и это тот же каталог

...