Javascript 将脚本子项附加到某个角度组件

目前，我正在使用以下方法向我的组件添加一个外部javascript源代码

组件。ts

this.script = this._renderer2.createElement('script');
this.script.type = 'text/javascript';
this.script.src = url
this.script.async = true;
document.getElementById('scriptContainer').appendChild(this.script);

component.html

<div id='scriptContainer' #scriptContainer></div>

---

问题是，它在我的angular项目的每个页面/组件中显示脚本。就脚本而言，我不能太好地销毁元素，我不确定将其注入组件是否正确

我有注入脚本的服务

import { Injectable } from '@angular/core';

interface Scripts {
  name: string;
  src: string;
}

declare var document: any;

@Injectable({ providedIn: 'root' })
export class DynamicScriptLoaderService {
  private scripts: any = {};

  constructor() {}

  loadScript(src: string) {
    return new Promise((resolve, reject) => {
      if (!this.scripts[src]) {
        this.scripts[src] = true;
        //load script
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        if (script.readyState) {
          //IE
          script.onreadystatechange = () => {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
              script.onreadystatechange = null;
              resolve({ script: src, loaded: true, status: 'Loaded' });
            }
          };
        } else {
          //Others
          script.onload = () => {
            resolve({ script: name, loaded: true, status: 'Loaded' });
          };
        }
        script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' });
        document.getElementsByTagName('head')[0].appendChild(script);
      } else {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      }
    });
  }
}

然后在我的代码中我会这样做

 this.scriptoader
      .loadScript(
        '//myscript.com/script.js'
      )
      .then(() => {});

---

这将确保我只注入脚本一次，并允许我在加载脚本后执行代码

您实际期望发生什么？您的脚本容器永不消亡