使用第三方类库

除了 NG-ZORRO 基础组件以及 @delon 业务组件以外,有时我们还需要引用其他外部类库,以下将介绍如何使用富文本组件 ngx-tinymce

Angular组件

安装依赖包

yarn add ngx-tinymce

注册

像富文本框你可能需要在所有子模块中都会可能会用到,因为建议在 SharedModule 模块中导入和导出他。

// #region third libs
import { NgxTinymceModule } from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule ];
// #endregion

region: third libs 区域是NG-ALAIN的一个编码约定,将所有第三方组件注册至 THIRDMODULES 变量中即可,而无须关心 @NgModule 内在的写法,有关更多编码约定可以参考编码规范建议

对于部分第三方组件,可能会需要一些配置项,建议在根模块中注册,例如:

import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
  imports: [
    BrowserModule,
    NgxTinymceModule.forRoot({
      baseURL: '//cdn.bootcss.com/tinymce/4.7.13/'
    })
  ]
})
export class AppModule { }

接下来你可以在任何子模块中使用 ngx-tinymce

<tinymce [(ngModel)]="html"></tinymce>

非Angular组件

引用一个非 Angular 组件实际上是一个 JavaScript 类库,例如二维码类库 qrious,这是一个纯洁的 JavaScript 类库(建议尽可能使用纯洁类库而非带有依赖其他)。

安装依赖包

yarn add qrious

导入脚本

angular.json 找到 scripts 节点并增加:

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

如果第三方类库需要额外的样式,还需要在 styles 增加路径。

注意:需要重新运行 ng s 才会生效。

延迟加载脚本

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

使用

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

一个调用的示例代码:

declare var QRious: any;

@Component()
export class DEMOComponent {
  constructor() {
    const qr = new QRious();
  }
}