Angular 创建公共组将
时间: 2024-01-03 09:05:04 浏览: 20
公共组件是指在多个模块中都可以使用的组件。在 Angular 中,我们可以通过创建一个公共模块来创建公共组件。
下面是创建公共组件的步骤:
1. 创建一个公共模块,通过命令 `ng g module shared` 创建一个名为 `shared` 的模块。
2. 在 `shared` 模块中创建公共组件,通过命令 `ng g component shared/my-component` 创建一个名为 `my-component` 的组件。
3. 在 `my-component.component.ts` 中编写组件代码。
4. 在 `shared.module.ts` 中导入和声明组件,将组件添加到 `exports` 数组中,以便其他模块可以使用它。
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponentComponent } from './my-component/my-component.component';
@NgModule({
declarations: [MyComponentComponent],
imports: [CommonModule],
exports: [MyComponentComponent],
})
export class SharedModule {}
```
5. 在其他模块中导入 `shared` 模块,并在模板中使用 `my-component` 组件。
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [HomeComponent],
imports: [CommonModule, SharedModule],
})
export class HomeModule {}
```
```html
<app-my-component></app-my-component>
```
这样就创建了一个公共组件,并在不同的模块中使用它。