如何在Angular 6组件中使用typer.js？

我来帮你搞定这个问题！你遇到的情况是典型的Angular组件作用域和全局JS库的适配问题，下面是一步步的解决方案：

第一步：确保正确引入typer.js #

首先确认你的angular-cli.json（Angular 6之后官方默认用angular.json，如果是旧项目可能还保留前者）里的scripts配置是正确的：

"scripts": ["./assets/typer.js"]

保存配置后一定要重启Angular开发服务器，否则新的脚本配置不会生效。

第二步：在组件中声明全局变量 #

typer.js是挂载在全局作用域的库，Angular组件默认无法直接识别全局变量，所以需要在组件文件顶部添加声明：

declare var Typer: any;

这样Angular就会认可Typer是一个全局可用的对象了。

第三步：在组件中正确初始化typer.js #

别在组件的constructor里初始化，这时候DOM元素还没渲染完成。应该在ngAfterViewInit生命周期钩子中执行初始化逻辑，比如：

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

declare var Typer: any;

@Component({
  selector: 'app-typer-demo',
  template: `<div id="typer-target"></div>`
})
export class TyperDemoComponent implements AfterViewInit {
  ngAfterViewInit() {
    new Typer('#typer-target', {
      strings: ['Hello Angular!', 'Integrating typer.js successfully!'],
      speed: 100,
      backSpeed: 50,
      loop: true
    });
  }
}

这里要注意，模板里的目标元素必须存在，ngAfterViewInit会在组件视图完全渲染后触发，此时可以安全地操作DOM。

为什么index.html能用，组件里不行？ #

因为index.html里的代码是在全局作用域下执行的，直接能访问到typer.js暴露的Typer变量；而Angular组件运行在独立的模块作用域中，默认看不到全局变量，所以需要手动声明才能使用。

如果还是没效果，可以检查这几点：

• typer.js的路径是否正确，确认./assets/typer.js确实存在于项目中
• 开发服务器是否重启过，配置变更后必须重启才能加载新脚本
• 浏览器控制台有没有报错，比如“Typer is not defined”，这通常是路径或变量声明的问题

内容的提问来源于stack exchange，提问作者GoodJeans