javascript - 如何以角度动态加载脚本及其功能

Question

最初，我将以下代码静态保存在 Index.html 中，并且可以正常工作。

<script src="/le.min.js"></script>
<script>
    LE.init({
        token: 'token',
        region: 'x'
    });
</script>

由于我的要求，我决定为此动态加载我编写的示例代码。

//loads librabry
jsScript = document.createElement('script');
jsScript.src = `/le.min.js`;
document.head[0].appendChild(jsScript);

//loads initialise function in the script
script = document.createElement('script');
script.innerHtml= `LE.init({
                    token: '${TOKEN}',
                    region: 'US'
                   });`
document.head[0].appendChild(script);

两者都正确附加，但它抛出错误LE is not defined。如果我附加初始化函数脚本type=text没有错误但不会发生初始化。我怎样才能做到这一点？

标签： javascriptangular

Answer 1

在 Angular 中动态加载脚本的正确方法是使用Renderer2类。首先将其注入您的构造函数，然后使用它将您的脚本添加到文档的头部标签。

constructor(private renderer: Renderer2) { }

ngOnInit() {
  const script = this.renderer.createElement('script');
  script.src = `https://cdnjs.cloudflare.com/ajax/libs/le_js/0.0.3/le.min.js`;
  this.renderer.appendChild(document.head, script);
}

从加载到您的应用程序的 js 脚本文件执行函数的正确方法是在您的组件/服务/或您想要使用它的任何其他地方声明( ) 这个对象。declare var LE: any;这样您就可以直接执行它的功能，而不是使用动态脚本。

声明后，您可以直接使用它，请参见以下示例代码：

declare var LE: any;

initLE() {
  LE.init({
    token: '${TOKEN}',
    region: 'US'
  });
}

log() {
  LE.log("Hello, logger!");
}

看看这个StackBlitz 演示

您可以在这个演示中看到我正在访问 LE 代码，但显然它由于缺少令牌而无法正常工作。

完整示例代码：

import { Component, OnInit, Renderer2 } from '@angular/core';

declare var LE: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private renderer: Renderer2) {

  }

  ngOnInit() {
    const script = this.renderer.createElement('script');
    script.src = `https://cdnjs.cloudflare.com/ajax/libs/le_js/0.0.3/le.min.js`;
    this.renderer.appendChild(document.head, script);
  }

  initLE() {
    LE.init({
      token: '${TOKEN}',
      region: 'US'
    });
  }

  log() {
    LE.log("Hello, logger!");
  }
}