2-Angular-基础-组件

中文文档：https://angular.cn/，本系列从Angular15.1.0开始

1 - 组件的构成

• template.html (模板)
• template.ts (行为)
• template.css/less/scss (样式)

这里如果学过vue的话很容易理解，这里angular将单vue文件拆成对应的三份

2 - 创建组件

• ng generate component panel 创建一个标准组件
  • 更多姿势
• 手动创建组件

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

// 添加组件装饰器
@Component({
  selector: 'app-panel', // 为组件选择一个css选择器
  templateUrl: './panel.component.html', // 为组件选择一个模板文件
  styleUrls: ['./panel.component.less'] // 为组件选择一个样式文件
})
export class PanelComponent {

}

装饰器详解 @component
selector : 每个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里;
templateUrl: 指定一个模板，模板是一段 HTML，它告诉 Angular 如何在应用中渲染组件。可以通过两种方式之一为组件定义模板：引用外部文件，或直接写在组件内部。
styleUrls：引用一个外部css文件

3 - 组件生命周期

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。

生命周期依次调用

钩子方法	用途	触发时机
ngOnChangs	当 Angular 设置或重新设置数据绑定的输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象	如果组件绑定过输入属性，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
ngOnInit	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。	在第一轮 ngOnChanges() 完成之后调用，只调用一次。而且即使没有调用过 ngOnChanges()，也仍然会调用 ngOnInit()（比如当模板中没有绑定任何输入属性时）
ngDoCheck	检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应	紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。
ngAfterContentInit	当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。	第一次 ngDoCheck() 之后调用，只调用一次。
ngAfterContentChecked	每当 Angular 检查完被投影到组件或指令中的内容之后调用。	ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
ngAfterViewInit	当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。	第一次 ngAfterContentChecked() 之后调用，只调用一次。
ngAfterViewChecked	每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。	ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy	每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。	销毁之前（指令/组件）