Angular 的核心构建块是 组件（Components），它是实现用户界面的基本单元。每个组件通常包含模板（HTML）、逻辑（TypeScript）和样式（CSS）三部分。

组件核心概念

  • 组件类：通过 @Component 装饰器定义，包含选择器、模板URL、样式等元数据
    Angular_Component
  • 模板：使用 HTML 和 Angular 模板语法（如 {{ }}、*ngIf）构建 UI
  • 数据绑定：支持双向绑定（[(ngModel)]）和属性绑定（[attr.aria-label]）
  • 事件处理：通过 (click)、(input) 等语法监听用户交互
    Event_Binding

组件生命周期

Angular 组件有 8 个生命周期钩子（Lifecycle Hooks）：

  1. ngOnChanges
  2. ngOnInit
  3. ngDoCheck
  4. ngAfterContentInit
  5. ngAfterContentChecked
  6. ngAfterViewInit
  7. ngAfterViewChecked
  8. ngOnDestroy
Lifecycle_Hook

常用组件类型

类型 说明 示例
@Component 声明组件 @Component({ selector: 'app-root' })
@Directive 创建自定义指令 @Directive({ selector: 'my-button' })
@Pipe 实现数据转换 `{{ name
Component_Class

实战示例

创建一个简单组件： 

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>欢迎使用 Angular！</p>`,
  styleUrls: ['./example.component.css']
})
export class ExampleComponent { }

扩展阅读

想深入了解 Angular 的高级组件用法？
点击这里查看 Angular 模板与样式指南 ✅

📌 提示：组件是 Angular 应用的基石，建议结合 Angular 官方文档 深入学习。