Angular 5-加载视图后加载脚本

Question

我有一个旧脚本，需要在我的角度应用程序中包括它。 关于此脚本的事情是，它与特定的组件有关，并且仅在加载组件的视图之后才需要加载它。 对于今天，我已经成功地将其包含在OnInit函数中，但是CLI有时（并非总是出于某种原因）会引发错误。

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-player-page', templateUrl: './player-page.component.html', styleUrls: ['./player-page.component.scss'] }) export class PlayerPageComponent implements OnInit { public itemId: string; constructor() {} ngOnInit() { //We loading the player srcript on after view is loaded require('assets/scripts/player/player.js'); } } 

该脚本假定UI中存在元素，并按ID搜索它们。 将其添加到页面顶部时，它将不起作用。 实现所需行为的最佳方法是什么？

Answer 1

有多种解决方案。

1. 在组件顶部声明require const

    declare const require: any; import { Component, OnInit } from '@angular/core'; @Component({}) ... 

2. 使用打字稿中的动态import()函数

    ngAfterViewInit() { //We loading the player script on after view is loaded import('assets/scripts/player/player.js'); } 

3. 将库更改为仅在从组件调用函数后才开始运行，这样就可以将其添加到angular.json的scripts数组中