Angular 学习笔记 (三） - LifeCycle和ViewEncapsulation

一. 组件的LifeCycle

ngOnChanges	绑定输入属性更改后调用
ngOnInit	组件初始化后调用
ngDoCheck	在每次更改检测运行期间调用
ngAfterContentInit	在将内容（ng-content）投影到视图中之后调用
ngAfterContentChecked	每次检查投影内容时调用
ngAfterViewInit	在组件的视图（和子视图）初始化后调用
ngAfterViewChecked	每次检查视图（和子视图）时调用
ngOnDestroy	组件即将销毁时调用

二. 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：

import {Component, Directive, Input, ViewChild} from '@angular/core';

@Directive({selector: 'pane'})
export class Pane {
  @Input() id!: string;
}

@Component({
  selector: 'example-app',
  template: `
    <pane id="1" *ngIf="shouldShow"></pane>
    <pane id="2" *ngIf="!shouldShow"></pane>

    <button (click)="toggle()">Toggle</button>

    <div>Selected: {{selectedPane}}</div>
  `,
})
export class ViewChildComp {
  @ViewChild(Pane)
  set pane(v: Pane) {
    setTimeout(() => {
      this.selectedPane = v.id;
    }, 0);
  }
  selectedPane: string = '';
  shouldShow = true;
  toggle() {
    this.shouldShow = !this.shouldShow;
  }
}