理解 Angular 组件

组件是 Angular 应用的构建块。在本课中，您将了解组件及其生命周期。

什么是组件？

组件是一段包含 HTML、CSS 和 TypeScript 代码的用户界面。它代表应用用户界面的一部分。

创建组件

使用 Angular CLI 可以轻松创建组件：

ng generate component my-component

ng generate component my-component

组件结构

Angular 组件通常包含四个主要文件：

• .html：模板
• .ts：逻辑
• .css：样式
• .spec.ts：测试

组件装饰器

@Component 装饰器会将组件类与其模板和样式关联起来。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

生命周期钩子

Angular 组件具有生命周期钩子，可让您在特定时间点运行代码。常见的钩子包括 ngOnInit() 和 ngOnDestroy()。

使用 ngOnInit()

ngOnInit() 会在 Angular 初始化组件数据后运行。它非常适合执行初始设置：

ngOnInit() {
  console.log('Component initialized!');
}

显示组件

在其他模板中使用组件的选择器即可显示该组件：

<app-my-component></app-my-component>

总结

您已经了解了组件、组件的创建方式以及生命周期钩子。做得很好！