1. 使用 Angular CLI 创建库项目
打开终端，使用 Angular CLI 创建一个新的库项目。执行以下命令：
ng generate library my-library
这将在 projects 文件夹下创建一个名为 my-library 的库项目。
2. 开发库
进入新创建的 projects/my-library 目录，你可以在这里编写和组织你的库代码。通常，库项目的结构包含以下部分：
- src/lib: 包含库的源代码，包括组件、服务等。
- public-api.ts: 导出库的公共 API，用于其他项目引入。
- tsconfig.lib.json: 库项目的 TypeScript 配置文件。
3. 定义和导出库的功能
在 public-api.ts 文件中，你需要导出你希望暴露给其他项目的组件、服务、指令等。例如：
// projects/my-library/src/public-api.ts
export * from './lib/my-component/my-component.component';
export * from './lib/my-service/my-service.service';
4. 构建库
在库项目的根目录运行以下命令，构建你的库：
ng build my-library
这将在 dist 文件夹下生成你的库的构建文件。
5. 发布库到 npm（可选）
如果你希望将你的库发布到 npm，可以使用以下步骤：
- 在 npm 上创建一个账户。
- 运行 npm login 登录到你的 npm 账户。
- 在库项目的根目录运行 npm publish。
6. 在其他项目中使用库
在其他 Angular 项目中，你可以使用以下步骤引入并使用你的库：
1. 安装库：
npm install --save my-library
2. 在你的 Angular 模块中导入库模块：
// src/app/app.module.ts
import { MyLibraryModule } from 'my-library';
@NgModule({
imports: [MyLibraryModule],
// ...
})
export class AppModule {}
3. 在你的组件或服务中使用库中的功能：
// src/app/my-component.component.ts
import { Component } from '@angular/core';
import { MyService } from 'my-library';
@Component({
selector: 'app-my-component',
template: `
<div>{{ myService.getData() }}</div>
`,
})
export class MyComponentComponent {
constructor(private myService: MyService) {}
}
这就是创建和使用 Angular 库的基本步骤。
转载请注明出处：http://www.zyzy.cn/article/detail/5031/Angular