时间戳

首页 > 解决方案 > 如何将脚本标签嵌入到 Angular 组件中

javascript - 如何将脚本标签嵌入到 Angular 组件中

问题描述

我有一个 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()
  }

}

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;
	}
};

标签： javascripthtmlangulartypescriptembed

解决方案

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

推荐阅读