Angular 的组件是构建用户界面的核心单元，掌握组件设计原则能显著提升开发效率。以下是关键知识点：

1. 组件基础 📌

  • 定义：组件是可复用的自包含模块，包含模板、逻辑和样式
  • 结构：由 @Component 装饰器定义元数据，如选择器 selector、模板 template、样式 styleUrls
  • 生命周期：ngOnChanges、ngOnInit、ngDoCheck 等钩子函数的使用场景

2. 组件通信 📡

  • 父组件 → 子组件：通过 @Input() 传递数据
  • 子组件 → 父组件：使用 @Output() 发射事件
  • 兄弟组件：通过服务或父组件中转

3. 组件样式 🎨

  • 封装样式：使用 encapsulation: ViewEncapsulation.None 禁用视图封装
  • CSS 变量：通过 :host 选择器定义主题变量
  • 样式继承：合理使用 CSS 父选择器 & 实现样式复用

angular component

4. 实践建议 ✅

  • 使用 ng generate component 命令快速创建
  • 遵循单向数据流原则
  • 保持组件职责单一（Single Responsibility Principle）

📚 想深入了解组件最佳实践？请访问 /angular/components_best_practices

5. 常见问题 ❓

  • 如何优化组件性能？
    使用 OnPush 检测策略 + 避免不必要的变更检测

    component optimization

  • 如何实现组件复用？
    通过 @Component 的 selector 导出可嵌套的 UI 单元

component design