如何将脚本标签嵌入 Angular 组件

Question

我有一个 Angular/Typescript 网站。我需要嵌入第三方脚本。该脚本生成一个 table。

如何在 home.component.html 中显示 table。不是在开始或开始时，在里面。像这样。

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

更新

table 现在可以呈现，但只能在 app-root 之外呈现。它应该在 home.component.html 内。 Source Image

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>标签不会执行

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

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

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

假设要加载的脚本是myfile.js并且是同一个目录

如何将脚本标签嵌入 Angular 组件

How to embed a script tag into Angular component

html

javascript

embed

typescript

angular