Angular 组件是构建用户界面的核心单元，掌握组件开发能让你更高效地开发应用。以下是关键知识点：

1. 组件基础结构 📁

/src
  ├── app
  │   ├── components
  │   │   └── my-component.component.ts
  │   └── app.module.ts
  • 每个组件包含：@Component装饰器、模板文件、样式文件、逻辑代码
  • 组件通过 selector 定义标签名，如 <app-my-component>

2. 创建组件步骤 ✅

  1. 使用 Angular CLI 命令：ng generate component my-component
  2. 编写组件逻辑：
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<p>欢迎学习Angular组件！</p>`,
  styles: [`p { color: #4257b7; }`]
})
export class MyComponent { }

3. 组件生命周期钩子 🔄

钩子名称 触发时机 示例用途
ngOnChanges 输入属性变化时 数据绑定更新
ngOnInit 组件初始化后 执行初始化逻辑
ngOnDestroy 组件销毁前 清理资源

4. 数据绑定与事件处理 📡

  • 双向绑定：[(ngModel)]（需在app.module.ts中添加FormsModule）
  • 事件绑定：(click)="onButtonClick()"

5. 扩展学习 📚

Angular_Component

通过组件化开发，你可以像乐高积木一样搭建复杂应用。建议结合组件样式与主题进一步学习！