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

【问题标题】：How to load External JS and CSS files into Angular 5 (files loading with delay)如何将外部 JS 和 CSS 文件加载到 Angular 5 中（文件加载延迟）
【发布时间】：2021-02-16 16:03:24
【问题描述】：

正如标题所示，我在尝试将外部 js 和 css 文件导入 Angular 5 应用程序时遇到了一些问题。

这是我到目前为止尝试过的代码 sn-p

Component.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");

我可以在网络选项卡中看到文件，但问题是这个文件加载有延迟，所以我的函数在没有这些知识的情况下渲染，后来加载没有用。

它只适用于重新加载，如果我们从一个组件导航到另一个组件。它会在第一次冻结，并且在重新加载页面后会与动态脚本一起正常显示。

遇到了一些与之相关的问题，但没有任何效果

有没有人遇到过类似的情况..任何帮助都非常感谢:)

【问题讨论】：

可以this帮忙吗？
@DavidR 试过但没有运气 ;)

标签： javascript css angular typescript angular5

【解决方案1】：

最初我不想添加 setTimeout 以使其正常工作。

但是除了在延迟后加载文件外，没有任何效果，我们允许组件完全呈现，然后将我们的 js (+ css) 文件附加到本机元素。

...

ngOnInit() {
   setTimeout(() => {
        this.loadScript();
   }, 100);
}

...

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

快乐编码。 :)

【讨论】：