Angular 2：模板渲染時觸發ngOnChanges

Question

當我的模板渲染ngOnChanges內部的函數時，將觸發一次，然后僅在@input更改時觸發。 這是預期的行為，如何預防？

兒童：

export class MobileMenuComponent implements OnInit, OnChanges {

@Input('test') dezeTest: string;

//declare menu
menu;

constructor() { 

    //define menu

    this.menu = {state: 'inactive'};

}

togglemenu() {

    var that = this;

    if (that.menu.state === 'inactive'){

        that.menu.state = 'active';

    }

    else {

        that.menu.state = 'inactive';

    }

}

ngOnChanges(changes: SimpleChanges) {


    this.togglemenu();


}
}

Answer 1

這是ngOnChanges的正常行為。

ngOnChanges方法將首次觸發，因為您的屬性已被檢查，隨后會在更新屬性時觸發。 從文檔中 ，您可以看到

在檢查了數據綁定屬性之后，以及在檢查視圖和內容子級是否至少其中之一已更改之前，立即調用ngOnChanges。

如果要更改它，則需要考慮如何更改它。 這不是很清楚，但是如果您想防止ngOnChanges再次觸發，則在更新屬性時（由於您的toggleMenu() ，您希望這樣toggleMenu()您可以考慮使用ngOnInit()而不是ngOnChanges() 。另外，您也可以在第一次之后鎖定togglemenu（）;。

 firstrun : boolean = true; // class variable
 ngOnChanges(changes : SimpleChanges){
    if(firstrun){
      this.togglemenu();
      firstrun = false;
    }
  }

另外，如前所述，另一個生命周期掛鈎可能更適合您的需求。

Answer 2

要擴展現有答案，並同時解決在評論中提出的鍵入問題：

對於這種確切情況，存在SimpleChange＃firstChange字段。

另外，由於在調用ngOnChanges之前已在組件上設置了值，因此您還可以檢查字段是否已更改，然后檢查是否已設置：

ngOnChanges(changes: { myField: SimpleChange }) {
    if(changes.myField && this.myField){ 
        // do a thing only when 'myField' changes and is not nullish.
    }
    // Or, if you prefer: 
    if(changes.myField && changes.myField.firstChange){ 
        // Do a thing only on the first change of 'myField'.
        // WARNING! If you initialize the value within this class 
        // (e.g. in the constructor)  you can get null values for your first change
    }
}

另一個小警告：如果使用WebStorm之類的工具在組件上重命名“ myField”，則不會更新ngOnChanges方法參數（{myField：SimpleChange}）的“ myField”。 這可能會導致一些有趣的組件初始化錯誤。

Answer 3

正如Dylan Meeus所建議的那樣，這是正常行為。 但我建議使用另一種解決方案，該方法利用傳遞的SimpleChange對象。 它包含一個previousValue和currentValue。最初，未設置previousValue。 https://angular.io/docs/ts/latest/api/core/index/SimpleChange-class.html

ngOnChanges(changes : any){
   if(changes.menu.previousValue){
      this.togglemenu();
   }
}

此外，請注意OnChanges，因為它會在每個輸入參數上觸發...（您將來可能會添加更多內容）