1. 创建 Angular 库
要创建一个 Angular 库,可以使用 Angular CLI 提供的生成器。执行以下命令:
ng generate library my-library
这将在你的项目中创建一个名为 my-library 的库。在 projects 文件夹下会生成一个名为 my-library 的文件夹。
2. 开发 Angular 库
在生成的库项目中,你可以编写和组织你的库代码。这可能包括组件、服务、指令等。确保你的库项目中有一个 public-api.ts 文件,它将导出你希望暴露给库使用者的内容。
3. 构建 Angular 库
构建 Angular 库时,你可以使用 Angular CLI 提供的命令。在库项目的根目录运行:
ng build my-library
这将在 dist 文件夹下生成一个构建好的库。你可以将这个构建好的库发布到 npm 上,也可以直接在你的 Angular 项目中本地引用。
4. 在 Angular 项目中使用库
在你的 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 { MyLibraryService } from 'my-library';
@Component({
selector: 'app-my-component',
template: `
<my-library-component></my-library-component>
{{ myLibraryService.getData() }}
`,
})
export class MyComponentComponent {
constructor(private myLibraryService: MyLibraryService) {}
}
5. 发布库到 npm
如果你希望分享你的 Angular 库,可以将其发布到 npm 上。确保在 package.json 文件中设置了正确的版本号,并在库项目的根目录运行以下命令:
npm publish
这将把你的库发布到 npm,其他人就可以通过 npm 安装和使用它。
这些步骤提供了一个简单的介绍,帮助你开始在 Angular 中创建和使用库。 Angular CLI 提供了丰富的工具和命令,使得库的开发、构建和发布都变得相对简单。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5028/Angular