Javascript 如何在angular中动态加载脚本及其函数

最初，我在Index.html中静态地保存了下面的代码，它可以正常工作

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

---

两者都正确追加，但未定义错误

LE

。如果将初始化func脚本追加为

type=text

则不会发生错误，但不会发生初始化。如何实现这一点？

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

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;

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

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

看看这个

您可以看到，在这个演示中，我谈到了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!");
  }
}

---

脚本文件可能尚未加载，因此未定义LE。您需要使用onload事件：我相信第一个脚本需要一个

onload

事件处理程序使用Angular安全管道实现Domsanizer（bypassSecurityTrustScript）我希望这个答案会有所帮助-我正在调用

ngAfterViewInit

中的那些

onload

在Angular中对我有什么帮助？

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!");
  }
}