Angular 9：使用带有条件的外部 js 脚本

Question

我是 Angular 9 的新手。

我有一个外部js脚本，我通过使用meta标签从后端获取了这个脚本的url。 我有一个函数返回一个布尔值，我想当这个方法返回 true 时我调用脚本，如果它是 false 什么都不做。

我从后端读取了网址：

  <meta name="myScriptUrl" content="URLSCRIPT"> 

在 app.component.ts 中，我创建了两种方法，一种用于获取脚本的 url，另一种返回布尔值

public getUrlScrip(): string {
  return this.configurationService.getConfig('myScriptUrl');
}
public isCheck(): boolean {
  return (this.model.specificTest === anyString);
}

这是我可以使用脚本的特定组件（insert-js.component.ts），

@Component
export class insertJs implements OnInit, OnDestroy {

public usrlScript: string;

constructor(
  private readonly appComponent: AppComponent;
}

ngOnInit() {
  if (this.appComponent.isCheck) {
    usrlScript = this.appComponent.getUrlScrip();
  }

这是 insert-js.component.html

 <script type="text/javascript" src="urlScript"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { //set varriable in the script }, {once: true}); </script>

谢谢给我一些想法来做到这一点

Answer 1

您可以通过这种方式尝试 Renderer2：-

constructor(private renderer: Renderer2){}

addScriptToElement(src: string): HTMLScriptElement {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  this.renderer.appendChild(document.body, script);
  //use removeChild to remove the added tag on your condition
  return script;
}

以这种方式调用此函数：-

this.addScriptToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload = () => {
        console.log('Loaded SkyScanner tag successfully!');
}