java Angular 9:使用外部js脚本和条件

fykwrbwg  于 2023-11-15  发布在  Java
关注(0)|答案(1)|浏览(114)

我是Angular 9的新手。
我有一个外部的js脚本,我通过使用Meta标签从后端获取了这个脚本的url。我有一个函数返回一个布尔值,我希望当这个方法返回true时,我调用脚本,如果它是false,什么都不做。
我从后端读取了URL:

<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 variable in the script
    }, {once: true});
  </script>


谢谢你给予我一些做这件事的想法

dsekswqp

dsekswqp1#

你可以这样尝试Renderer 2:

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

相关问题