如何将外部 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");

我能够在网络选项卡中看到文件，但问题是此文件加载会出现延迟，因此我的函数在不了解此信息的情况下呈现，后来加载却没有任何用处。

它仅适用于重新加载，如果我们从一个组件导航到另一个组件。第一次会冻结，重新加载页面后，可以正确地看到页面和动态脚本。

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

1. 从 Angular 组件动态加载外部 javascript 文件
2. 如何在 Angular 中动态加载外部脚本？

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

Answer 1

最初尝试避免

setTimeout

以使其发挥作用。

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

...

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

...

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

快乐编码。 :)