在Angular 9中,您可以使用外部JavaScript脚本,并根据条件加载它们。以下是一种可能的解决方法:
将外部JavaScript脚本文件(例如script.js)放置在src/assets目录下。
在组件的ts文件中,通过JavaScript的原生API来动态创建和加载脚本。例如,创建一个名为loadScript
的函数:
loadScript(url: string) {
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
ngOnInit
或ngAfterViewInit
。在这个例子中,我们将在组件初始化时加载脚本。import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
ngOnInit() {
if (condition) {
this.loadScript('assets/script.js');
}
}
loadScript(url: string) {
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
}
请注意,您需要将condition
替换为您自己的条件,以确定是否加载脚本。
async
来达到这一点。
通过将脚本包裹在一个*ngIf
指令和condition
来控制脚本的加载和执行。
相关内容