要创建可重用的 Angular 组件库,可以按照以下步骤进行:
ng new my-component-library
ng generate library my-components
cd projects/my-components
ng generate component my-component
在 projects/my-components/src/lib
目录下,可以看到生成的组件文件 my-component.component.ts
、my-component.component.html
和 my-component.component.css
。
在 my-component.component.ts
文件中,实现你的组件逻辑和模板。
在 my-components.module.ts
文件中,将新创建的组件添加到模块的 declarations
和 exports
数组中:
import { NgModule } from '@angular/core';
import { MyComponentComponent } from './my-component/my-component.component';
@NgModule({
declarations: [MyComponentComponent],
exports: [MyComponentComponent]
})
export class MyComponentsModule { }
ng build my-components
构建完成后,在 dist
目录下会生成一个名为 my-components
的文件夹,其中包含编译后的组件库。
在其他的 Angular 项目中,可以使用以下命令将组件库添加为依赖项:
ng add my-components
declarations
或 imports
数组中,然后在模板中使用该组件。这样就可以创建一个可重用的 Angular 组件库,并在其他项目中使用。