angular子組件監聽父組件傳入值的變化

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

生命周期

鈎子分類

• 指令與組件共有的鈎子

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngOnDestroy

• 組件特有的鈎子

  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

生命周期鈎子的作用及調用順序

1. ngOnChanges - 當數據綁定輸入屬性的值發生變化時調用
2. ngOnInit - 在第一次 ngOnChanges 后調用
3. ngDoCheck - 自定義的方法，用於檢測和處理值的改變
4. ngAfterContentInit - 在組件內容初始化之后調用
5. ngAfterContentChecked - 組件每次檢查內容時調用
6. ngAfterViewInit - 組件相應的視圖初始化之后調用
7. ngAfterViewChecked - 組件每次檢查視圖時調用
8. ngOnDestroy - 指令銷毀前調用

首次加載順序

export class demoComponent {

    constructor() {

        console.log('00構造函數執行了---除了使用簡單的值對局部變量進行初始化之外，什么都不應該做')--非生命周期函數
    }

    ngOnChanges() {

        console.log('01ngOnChages執行了---當被綁定的輸入屬性的值發生變化時調用(父子組件傳值的時候會觸發)'); 
    }

    ngOnInit() {
        console.log('02ngOnInit執行了--- 請求數據一般放在這個里面');
    }
    ngDoCheck() {
        console.log('03ngDoCheck執行了---檢測，並在發生 Angular 無法或不願意自己檢測的變化時作出反應');
    }
    ngAfterContentInit() {
        console.log('04ngAfterContentInit執行了---當把內容投影進組件之后調用');
    }
    ngAfterContentChecked() {
        console.log('05ngAfterContentChecked執行了---每次完成被投影組件內容的變更檢測之后調用');
    }
    ngAfterViewInit() : void {
        console.log('06 ngAfterViewInit執行了----初始化完組件視圖及其子視圖之后調用（dom操作放在這個里面）');
    }
    ngAfterViewChecked() {
        console.log('07ngAfterViewChecked執行了----每次做完組件視圖和子視圖的變更檢測之后調用');
    }

    ngOnDestroy() {
        console.log('08ngOnDestroy執行了····');
    }

    //自定義方法
    changeMsg() {

        this.msg = "數據改變了";
    }
}

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

我們的要求是子組件監聽父組件傳入的值，而ngOnChanges的作用是當數據綁定輸入屬性的值發生變化時調用，正是我們所需要的。廢話不多說，直接上代碼：

父組件

<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']) {
      //具體業務代碼
    }
  }
}
//changes['tabValue']有三個屬性，currentValue-當前值  previousValue-改變之前的值 firstChange-是否是第一次改變（previousValue為undefined時true,否則為false）

 總結：

1.ngOnChanges只對@Input傳入的屬性發生變化時會調用。

2.當@Input屬性是一個對象，當對象的屬性值發生變化並不會觸發，當對象的引用發生變化時才會觸發。