如何强制 Angular 组件在其模板中加载外部脚本

Question

我是一个从事项目的新手。 我的应用程序中的某些组件需要外部（第三方）脚本才能使某些功能正常工作，而我只需要在本地或通过 CDN 在组件的 HTML 模板中通过标签包含脚本。 我在这个平台上阅读了很多问题，但没有一个特别针对我的用例：

我只想添加一个这样的外部脚本标签： <script src="./assets/vendor/bla-bla-bla.min.js"></script>到我的组件模板，并强制 Angular 知道脚本并在我路由到我的组件时动态加载它们。 就这样！

Angular CLI 13.0.4，npm 8.19.2，节点 18.12.1

Answer 1

在这里你可以使用这个逻辑：

apiVariableName这里是需要调用的url中的变量名或者api。

 declare let apiVariableNameHere: any; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { constructor( private renderer: Renderer2, ) { } ngOnInit() { this.loadScript(yourUrl); } public loadScript(url) { let node = document.createElement('script'); node.src = url; node.type = 'text/javascript'; node.async = true; node.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(node); } }