我有一个 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()
}
}主页.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;
}
};不要手动插入脚本标签。在您的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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句