如何将外部 JS 和 CSS 文件加载到 Angular 5 中（文件加载延迟）

Question

正如标题所示，我在尝试将外部 js 和 css 文件导入Angular 5应用程序时遇到一些问题。这是我到目前为止尝试过的代码片段组件.ts：  ngOnInit() {    this.loadScript();        // tried with constructor as well  }  loadScript () {    const head = document.getElementsByTagName('head')[0];    const link = document.createElement('link');    const s = this.document.createElement('script');    s.type = 'text/javascript';    s.src = 'https://**/assets/js/patterns/name.min.js';    link.id = 'pattern';    link.rel = 'stylesheet';    link.type = 'text/css';    link.href = 'https://**/assets/js/patterns/name.min.css';    link.media = 'all';    head.appendChild(link);    const __this = this;    s.onload = function () { __this.afterScriptAdded(); };    this.elementRef.nativeElement.appendChild(s); }还尝试通过添加此行从 scss 文件加载 @import url("https://**/assets/js/patterns/name.min.css");我可以在网络选项卡中看到文件，但问题是此文件加载会出现延迟，因此我的函数在没有这些知识的情况下呈现，后来加载时没有任何用处。它仅适用于从一个组件导航到另一个组件时重新加载的情况。它会第一次冻结，重新加载后，页面将与动态脚本一起正确显示。遇到了一些与之相关的问题，但没有任何效果从 Angular 组件动态加载外部 javascript 文件如何在 Angular 中动态加载外部脚本？有谁遇到过类似的情况..非常感谢任何帮助:)

Answer 1

最初试图避免setTimeout这种情况发生。

然而，除了在一段延迟后加载文件之外，似乎没有任何作用，我们允许组件完全渲染，然后将我们的 js (+ css) 文件附加到本机元素。

...

ngOnInit() {

   setTimeout(() => {

        this.loadScript();

   }, 100);

}

...

虽然它可以工作，但仍然设置静态超时值。如果您对此有更好的解决方案，请告诉我。

快乐编码。:)