如何将脚本标记嵌入到角组件中

Question

我有一个棱角分明/打字的网站。我需要嵌入第三方脚本。脚本生成一个表。

如何在home.component.html中显示该表。不是在开始或开始的时候，而是内在。就像这样。

我已经能够嵌入脚本，但它看起来不像脚本正在呈现，所以它只是在源代码中显示它，但不呈现表。

更新

该表现在可以呈现，但只能在应用程序根目录之外。它应该在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()
  }

}

​

home.component.html

​

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

​

脚本后面的代码如下所示。我把它放在一个external.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;
	}
};

​

Answer 1

不要手动插入脚本标记。在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

Answer 2

在加载页面时执行所有脚本，加载页面后添加到dom的<script>标记不会被执行。

因此，嵌入脚本标记不会加载文件接缝角的内容，因此不会重新加载页面。

一个解决方案是让组件实现AfterInit接口，并在ngAfterInit方法中动态导入脚本，如下所示

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

假设要加载的脚本是myfile.js，并且是相同的指向