Angular 学习笔记 ，三 - LifeCycle和ViewEncapsulation

一. 组件的LifeCycle

绑定输入属性更改后调用

组件初始化后调用

在每次更改检测运行期间调用

在将内容（ng-content）投影到视图中之后调用

每次检查投影内容时调用

在组件的视图（和子视图）初始化后调用

每次检查视图（和子视图）时调用

组件即将销毁时调用

二. ViewEncapsulation

@ViewEncapsulation

定义可用于Component的Component的模板和样式封装选项。
Emulated (0) : 　通过向主机元素添加包含替代ID的属性，并对通过styles或styleUrls提供的样式规则进行预处理，然后将新的Host Element属性添加到所有选择器，来模拟样式的本机作用域。
None（2）：　　　　不提供ViewEncapsulation
ShadowDom (3) :　使用Shadow DOM封装样式。对于DOM，这意味着使用现代的Shadow DOM并为组件的Host元素创建ShadowRoot。

三. ViewChild

@ViewChild (from angular 8)

用于配置视图查询的属性装饰器。变更检测器在视图DOM中查找与选择器匹配的第一个元素或指令。如果视图DOM更改，并且有一个新的子项与选择器匹配，则该属性将更新。

Example：

 1 import {Component, Directive, Input, ViewChild} from '@angular/core';
 2 
 3 @Directive({selector: 'pane'})
 4 export class Pane {
 5   @Input() id!: string;
 6 }
 7 
 8 @Component({
 9   selector: 'example-app',
10   template: `
11     <pane ></pane>
12     <pane ></pane>
13 
14     <button (click)="toggle()">Toggle</button>
15 
16     <div>Selected: {{selectedPane}}</div>
17   `,
18 })
19 export class ViewChildComp {
20   @ViewChild(Pane)
21   set pane(v: Pane) {
22     setTimeout(() => {
23       this.selectedPane = v.id;
24     }, 0);
25   }
26   selectedPane: string = '';
27   shouldShow = true;
28   toggle() {
29     this.shouldShow = !this.shouldShow;
30   }
31 }