Angular笔记（二）组件结构与生命周期

• 组件包括：

• HTML 模板: 声明页面渲染的内容
• TypeScript 类: 定义行为
• CSS 选择器: 定义组件在模板中的使用方式
• （可选）要应用在模板上的 CSS 样式

一、 创建组件:

1. 使用 Angular CLI 创建一个组件

ng generate component <component-name>

得到文件夹：
组件文件 <component-name>.component.ts
模板文件 <component-name>.component.html
CSS 文件<component-name>.component.css
测试文件 <component-name>.component.spec.ts

2. 指定组件的 CSS 选择器

每个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里。

@Component({
  selector: 'app-component-overview',
})

3. 定义模板，声明样式

为组件定义模板：引用外部文件，或直接写在组件内部
为组件声明样式：引用一个外部文件，或直接写在组件内部

//外部文件:
@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})
//内部
@Component({
  selector: 'app-component-overview',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans multiple lines.</p>
  `
  styles: ['h1 { font-weight: normal; }']
})

二、生命周期

func	用途	notes	tasks
ngOnChanges()	当 Angular 设置或重新设置数据绑定的输入属性时响应	接受当前和上一属性值的 SimpleChanges 对象
ngOnInit()	初始化指令/组件	在第一轮 ngOnChanges() 完成之后调用，只调用一次。即使没有调用过 ngOnChanges()，也仍然会调用	1. 获取初始数据 2. 设置输入属性初始化指令
ngDoCheck()	检测
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()	初始化完组件视图及其子视图或包含该指令的视图之后调用	只调用一次
ngAfterViewChecked()
ngOnDestroy()	销毁指令/组件之前调用并清扫	在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。	1. 取消订阅可观察对象和 DOM 事件 2. 停止 interval 计时器 3. 反注册指令在全局或应用服务中注册过的所有回调

• 使用变更检测钩子

一旦检测到该组件或指令的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法。

ngOnChanges() 方法获取了一个对象，它把每个发生变化的属性名都映射到了一个SimpleChange对象，该对象中有属性的当前值和前一个值。
这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。

内容投影 Content projection

是从组件外部导入 HTML 内容，并把它插入在组件模板中指定位置上的一种途径。

<ng-content> 标签是外来内容的占位符。

<ng-content>HTML</ng-content>