如何将外部 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);}...虽然它可以工作，但仍然设置静态超时值。如果您对此有更好的解决方案，请告诉我。快乐编码。:)