关于angular:如何创建-Angular-库并在-Angular-应用里调用

40次阅读

共计 1307 个字符,预计需要花费 4 分钟才能阅读完成。

把性能打包成库会强制库中的工件与利用的业务逻辑拆散。这有助于防止各种不良实际或架构失误,这些失误会导致未来很难解耦和复用代码。

把代码放到一个独自的库中比简略地把所有内容都放在一个利用中要简单得多。它须要更多的工夫投入,并且须要治理、保护和更新这个库。不过,当把该库用在多个利用中时,这种复杂性就会失去回报。

Angular 库是一个 Angular 我的项目,它与利用的不同之处在于它自身是不能运行的。必须在某个利用中导入库并应用它。

应用上面的命令行,创立一个库:

ng generate library my-lib

angular.json 文件在 projects 节点下,多了一个 my-lib 节点,其 projectType 类型为 library:

angular.json 里的层级构造和文件系统的目录同样是统一的:

这个库有属于本人独自的 package.json:

这个库无奈独自运行,那么如何测试呢?

应用如下命令行。

ng build my-lib –configuration development
ng test my-lib
ng lint my-lib

要让库代码能够复用,你必须为它定义一个公共的 API。这个“用户层”定义了库中消费者的可用内容。该库的用户应该能够通过单个的导入门路来拜访公共性能(如 NgModules、服务提供者和工具函数)。

库的公共 API 是在库文件夹下的 public-api.ts 文件中保护的。当你的库被导入利用时,从该文件导出的所有内容都会公开。

下图是一个例子:

我的 service 类:

请应用 NgModule 来裸露这些服务和组件:Use an NgModule to expose services and components.

如何生产咱们本人开发的库

间接在咱们的 AppModule 的 imports 区域里,导入咱们的 Angular library 通过 public_api.ts 导出的 component 和 service 即可。

通过依赖注入,导入咱们库里导出的 service 类的实例:

运行 Angular 利用,发现咱们 Angular 库里的 service 打印出的字符串,阐明 library 应用胜利了:

如何应用 Angular 曾经公布的库

这些库都是作为 npm 包公布的,它们通常都带有一些与 Angular CLI 集成好的 schematic。要把可复用的库代码集成到利用中,你须要装置该软件包并在应用时导入它提供的性能。对于大多数已公布的 Angular 库,你能够应用 Angular CLI 的 ng add <lib_name> 命令。

比方 SAP Spartacus 的装置命令行:

ng add @spartacus/schematics@latest

ng add 命令底层会应用 npm 包管理器或 yarn 来装置库包,并调用该包中的 schematic 在我的项目代码中增加脚手架,比方增加 import 语句、增加 fonts,增加 themes 等。

应用 ng update <lib_name> 来独自更新某个库的版本。Angular CLI 会查看库中最新公布的版本,如果最新版本比你已装置的版本新,就会下载它并更新你的 package.json 以匹配最新版本。

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

正文完
 0