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

对此问题有多种解决方案。

在组件顶部声明require常量

declare const require: any;

import { Component, OnInit } from '@angular/core';

@Component({})
...

使用打字稿中的动态import()功能

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

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

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

1 个答案: