在進(jìn)入主題之前，先了解一下angular的生命周期。

生命周期

鉤子分類

• 指令與組件共有的鉤子

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngOnDestroy

• 組件特有的鉤子

  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

生命周期鉤子的作用及調(diào)用順序

1. ngOnChanges - 當(dāng)數(shù)據(jù)綁定輸入屬性的值發(fā)生變化時(shí)調(diào)用
2. ngOnInit - 在第一次 ngOnChanges 后調(diào)用
3. ngDoCheck - 自定義的方法，用于檢測(cè)和處理值的改變
4. ngAfterContentInit - 在組件內(nèi)容初始化之后調(diào)用
5. ngAfterContentChecked - 組件每次檢查內(nèi)容時(shí)調(diào)用
6. ngAfterViewInit - 組件相應(yīng)的視圖初始化之后調(diào)用
7. ngAfterViewChecked - 組件每次檢查視圖時(shí)調(diào)用
8. ngOnDestroy - 指令銷毀前調(diào)用

首次加載順序

export class LifecircleComponent {constructor() {console.log('00構(gòu)造函數(shù)執(zhí)行了---除了使用簡(jiǎn)單的值對(duì)局部變量進(jìn)行初始化之外，什么都不應(yīng)該做')}ngOnChanges() {console.log('01ngOnChages執(zhí)行了---當(dāng)被綁定的輸入屬性的值發(fā)生變化時(shí)調(diào)用(父子組件傳值的時(shí)候會(huì)觸發(fā))'); }ngOnInit() {console.log('02ngOnInit執(zhí)行了--- 請(qǐng)求數(shù)據(jù)一般放在這個(gè)里面');}ngDoCheck() {console.log('03ngDoCheck執(zhí)行了---檢測(cè)，并在發(fā)生 Angular 無法或不愿意自己檢測(cè)的變化時(shí)作出反應(yīng)');}ngAfterContentInit() {console.log('04ngAfterContentInit執(zhí)行了---當(dāng)把內(nèi)容投影進(jìn)組件之后調(diào)用');}ngAfterContentChecked() {console.log('05ngAfterContentChecked執(zhí)行了---每次完成被投影組件內(nèi)容的變更檢測(cè)之后調(diào)用');}ngAfterViewInit() : void {console.log('06 ngAfterViewInit執(zhí)行了----初始化完組件視圖及其子視圖之后調(diào)用（dom操作放在這個(gè)里面）');}ngAfterViewChecked() {console.log('07ngAfterViewChecked執(zhí)行了----每次做完組件視圖和子視圖的變更檢測(cè)之后調(diào)用');}ngOnDestroy() {console.log('08ngOnDestroy執(zhí)行了····');}//自定義方法changeMsg() {this.msg = "數(shù)據(jù)改變了";}
}

?

?

?參照：https://www.cnblogs.com/Aerfajj/p/10748887.html

我們的要求是子組件監(jiān)聽父組件傳入的值，而ngOnChanges的作用是當(dāng)數(shù)據(jù)綁定輸入屬性的值發(fā)生變化時(shí)調(diào)用，正是我們所需要的。廢話不多說，直接上代碼：

父組件

<child-demo [tabValue]="tabValue"></child-demo>

?

?子組件ts(與SimpleChange配合使用)

import?{Component, EventEmitter, Input, OnInit, OnChanges, SimpleChange, Output} from?'@angular/core';@Component({selector:?'app-child-demo',templateUrl:?'./child-demo.component.html',styleUrls: ['./child-demo.component.scss']})export?class?ChildDemoComponent?implements?OnInit {@Input() tabValue;@Output() gotoList: EventEmitter<{ goto: boolean, group: string}> =?new?EventEmitter<{goto:?false, group:?''}>();constructor(private?childDemoService: ChildDemoService) {}ngOnInit() {???}ngOnChanges(changes: SimpleChange){if?(changes['tabValue']) {//具體業(yè)務(wù)代碼}}}
//changes['tabValue']有三個(gè)屬性，currentValue-當(dāng)前值? previousValue-改變之前的值 
// firstChange-是否是第一次改變（previousValue為undefined時(shí)true,否則為false）

?

?總結(jié)：

1.ngOnChanges只對(duì)@Input傳入的屬性發(fā)生變化時(shí)會(huì)調(diào)用。

2.當(dāng)@Input屬性是一個(gè)對(duì)象，當(dāng)對(duì)象的屬性值發(fā)生變化并不會(huì)觸發(fā)，當(dāng)對(duì)象的引用發(fā)生變化時(shí)才會(huì)觸發(fā)，所以想要監(jiān)聽對(duì)象的變化，不可以直接修改對(duì)象的屬性，而是要給整個(gè)對(duì)象重新賦值。