- 入门
介绍 体系结构 升级到 18.0 版本
- 开发
新增页面 新增业务组件 和服务端进行交互 使用第三方类库 构建和发布 升级脚手架 全局配置项 如何开始 服务端渲染(SSR)
- 进阶
主题系统 图表 国际化 用户认证 ACL Mock 缓存 优化 编码规范建议
- 其他
命令行工具 常见问题 模块注册指导原则 贡献指南 更新日志
除了 NG-ZORRO 基础组件以及 @yelon 业务组件以外,有时我们还需要引用其他外部类库,以下将介绍如何使用富文本组件 ngx-tinymce:
npm i -S ngx-tinymce
像富文本框你可能需要在所有子模块中都会可能会用到,因为建议在 SharedModule
模块中导入和导出他。
// #region third libs
import { NgxTinymceModule } from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule ];
// #endregion
region: third libs
区域是NG-YUNZAI的一个编码约定,将所有第三方组件注册至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 组件实际上是一个 JavaScript 类库,例如二维码类库 qrious,这是一个纯洁的 JavaScript 类库(建议尽可能使用纯洁类库而非带有依赖其他)。
npm i -S qrious
在 angular.json
找到 scripts
节点并增加:
"scripts": [
"node_modules/qrious/dist/qrious.min.js"
]
如果第三方类库需要额外的样式,还需要在 styles
增加路径。
注意:需要重新运行
ng s
才会生效。
延迟加载脚本
上述导入脚本方式会把代码直接打包进 scripts.js
,这会导致 scripts.js
体积变大,NG-YUNZAI 提供另一种延迟加载CDN类库脚本解决方案,适用低使用率的业务(例如:zip 压缩),可以利用 LazyService 延迟加载远程CDN脚本。
Angular 是采用 TypeScript 语言,所有类型都必须明确定义才能使用,细节请参考 Angular 如何使用第三方库。
一个调用的示例代码:
declare var QRious: any;
@Component()
export class DEMOComponent {
constructor() {
const qr = new QRious();
}
}