Angular笔记--引用第三方JavaScript 类库

项目：使用NG-ALAIN，是基于 Angular 和 NG-ZORRO（Ant Design 的 Angular 版本） 基础组件库的中后台前端解决方案

引用第三方JavaScript 类库，以引入 driver.js----操作指引 为例

1 安装依赖包

yarn add driver.js

安装完成，node_module会增加driver.js

driver.js文件夹中有README.md文件，看这个文件了解使用方法，或者有声明文件看*.d.ts声明文件

2 导入

在angular.json 找到 styles节点并增加（无样式文件则不需要）：

"styles": [
  { "input": "node_modules/driver.js/dist/driver.min.css" },
]

使用：Angular 是采用 TypeScript 语言，所有类型都必须明确定义才能使用，细节请参考 Angular 如何使用第三方库

要想让一个类库被运用，前提是有没有声明文件。安装后，包里有*.d.ts，就是声明文件

（1）无声明文件，在angular.json 找到 scripts节点并增加：

"scripts": [
  "node_modules/driver.js/dist/driver.min.js"
]

注意：上述导入脚本方式会把代码直接打包进scripts.js,这会导致scripts.js体积变大，NG-ALAIN 提供另一种延迟加载CDN类库脚本解决方案，适用低使用率的业务（例如：zip 压缩），可以利用 LazyService 延迟加载远程CDN脚本。

LazyService用于延迟加载 JS 或 CSS 文件，对于无须被打包 script.js 且又是第三方类库比较大时，非常有用，一个简单的用法，例如：

import { LazyService } from '@delon/util';

export class AppComponent {
  constructor(private lazy: LazyService) {}

  ngOnInit() {
    this.lazy.load([ `xxxx.min.js` ]).then(() => {
      // do something
    });
  }
}

（2）有声明文件，无需额外做什么，只需在需要模块的地方使用 import 来导入即可，例如：

import * as Driver from 'driver.js';

@Component({
selector: 'header-avatar',
templateUrl: './avatar.component.html',
styleUrls: ['./avatar.component.less']
})
export class HeaderAvatarComponent implements OnInit {

introduce: any = new Driver({
opacity: 0.5,
onHighlighted: (element) => {
const header = document.getElementById('header-nav');
if (header.contains(element.getNode())) {
const stage = document.getElementById('driver-highlighted-element-stage');
stage.style.backgroundColor = 'rgba(255, 255, 255,0.15)';
}
const body = document.getElementsByTagName('body');
body[0].style.overflowY = 'hidden';
onReset: () => {
const body = document.getElementsByTagName('body');
body[0].style.overflowY = 'visible';
},
});

constructor() { }

ngOnInit(): void {
this.introduce.defineSteps(tourSteps);
this.introduce.start();
}
}