Angular 中什么是组件 (Component)？

推荐答案

在 Angular 中，组件（Component）是构建用户界面的基本构建块。每个组件由一个 TypeScript 类、一个 HTML 模板和一组可选的 CSS 样式组成。组件通过 Angular 的模板语法将数据绑定到视图，并处理用户交互。组件还可以通过输入（@Input）和输出（@Output）装饰器与其他组件进行通信。

本题详细解读

组件的组成

1. TypeScript 类：组件的核心逻辑部分，通常使用 @Component 装饰器来标记。这个类包含了组件的属性和方法，用于处理数据和逻辑。

   @Component({
     selector: 'app-example',
     templateUrl: './example.component.html',
     styleUrls: ['./example.component.css']
   })
   export class ExampleComponent {
     title = 'Example Component';
   }

2. HTML 模板：定义了组件的视图结构，使用 Angular 的模板语法来绑定数据和事件。

   <h1>{{ title }}</h1>
   <button (click)="onClick()">Click me</button>

3. CSS 样式：用于定义组件的外观和布局，可以内联在组件中，也可以通过外部文件引入。

   h1 {
     color: blue;
   }

组件的生命周期

Angular 组件有一系列生命周期钩子，允许开发者在组件的不同阶段执行自定义逻辑。常见的生命周期钩子包括：

• ngOnInit()：在组件初始化时调用。
• ngOnChanges()：当输入属性发生变化时调用。
• ngOnDestroy()：在组件销毁前调用。

组件的通信

1. 输入属性（@Input）：允许父组件向子组件传递数据。

   @Input() data: string;

2. 输出属性（@Output）：允许子组件向父组件发送事件。

   @Output() notify = new EventEmitter<string>();

组件的使用

组件通过选择器（selector）在模板中使用，通常以自定义 HTML 标签的形式出现。

<app-example></app-example>

组件的模块化

组件通常属于某个 Angular 模块（NgModule），并通过模块的 declarations 数组进行声明。

-- -------------------- ---- -------
-----------
  ------------- -
    ----------------
  --
  -------- -
    -------------
  --
  ---------- ---
  ---------- --------------
--
------ ----- --------- - -

通过以上内容，我们可以看出，组件是 Angular 应用的核心，负责管理视图、处理用户交互，并与其他组件进行通信。