Angular 我应该把哪些类添加到 declarations 中？

Question

可以把可声明的类添加到模块 declarations 列表中。可声明的类是指：组件、指令和管道。这些类只能在应用程序的一个并且只有一个模块中声明。只有当它们从属某个模块时，才能在此模块中声明它们。

---

在 Angular 中， declarations 是模块的 @NgModule 装饰器的一部分，用于声明该模块中会用到的组件、指令和管道。以下是应该添加到 declarations 中的类和相关注意事项：

---

需要添加到 declarations 中的类

1. 组件（Components）

• 任何该模块定义的 Angular 组件。
• 示例： typescript @Component({ selector: 'app-my-component', template: '<p>My Component</p>', }) export class MyComponent {}

1. 指令（Directives）

• 任何该模块定义的自定义指令。
• 示例： typescript @Directive({ selector: '[appMyDirective]', }) export class MyDirective {}

1. 管道（Pipes）

• 任何该模块定义的自定义管道。
• 示例： typescript @Pipe({ name: 'myPipe', }) export class MyPipe implements PipeTransform { transform(value: string): string { return value.toUpperCase(); } }

---

不应该添加到 declarations 中的类

1. 服务（Services）

• 使用 @Injectable 定义的服务应添加到 providers 或共享模块中，而不是 declarations 。
• 示例： typescript @Injectable({ providedIn: 'root', }) export class MyService {}

1. 模块（Modules）

• 其他 Angular 模块应该添加到 imports 中，而不是 declarations 。
• 示例： typescript @NgModule({ imports: [CommonModule], }) export class MyModule {}

1. 第三方库的类

• 由第三方库提供的组件、指令或管道应该通过模块导入到 imports 中，而不是直接声明。

---

注意事项

• 只有当前模块定义的组件、指令或管道才能声明在 declarations 中。如果某个组件需要跨模块使用，应将其移到共享模块并导出。
• declarations 中的类默认只在当前模块内可用，除非通过 exports 导出。

---

代码示例

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component.component';
import { MyDirective } from './my-directive.directive';
import { MyPipe } from './my-pipe.pipe';

@NgModule({
  declarations: [
    MyComponent, // 声明组件
    MyDirective, // 声明指令
    MyPipe       // 声明管道
  ],
  imports: [
    CommonModule // 导入其他模块
  ],
  exports: [
    MyComponent // 导出组件供其他模块使用
  ]
})
export class MyModule {}