在angular2中，如何獲取變化的屬性發生變化的對象@Input

我有一個指令，它是一個@Input接受一個類。在angular2中，如何獲取變化的屬性發生變化的對象@Input

@Directive({selector: 'my-directive'}) 
@View({directives: [CORE_DIRECTIVES]}) 
export class MyDirective { 
    @Input() inputSettings : SettingsClass; 
    @Input() count : number; 

    onChanges(map) { 
     console.log('onChanges'); 
    } 
}

的指令在HTML中使用：

... 
    <my-directive [input-settings]="settings" [count]="settings.count"></my-directive> 
    ...

如果settings.count改變，則onChanges將閃光。如果設置類中的任何其他屬性發生更改，則不會觸發。

如何檢測設置上是否有任何屬性發生更改？

來源

2015-12-07 Peter

我的猜測是此（目前？）不起作用......也許是因爲'inputSettings'包含對對象實例的引用，並且由於引用本身不會改變，所以Angular可能不會嘗試比較對象屬性，因此它不會查看或報告更改。（我希望我錯了，或者我希望他們解決這個問題。） –

確實，[Victor Savkin的博客文章]（http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation）證實了我的假設：「如果地址對象是可變的，其他組件可以更新街道屬性而不創建新的地址對象。如果發生這種情況，onChanges鉤子將不會被調用。 –

你也可以使用getter和setter作爲屬性輸入屬性 – Ayyash

如果該對象已被更改爲一個不同的對象角度只會通知（即對象引用改變），所以ngOnChanges()不能用來解決你的問題。有關更多信息，請參閱Victor Savkin's blog post。

您可以在MyDirective類中實現ngDoCheck()方法。該生命週期鉤子被稱爲「每次檢查組件或指令的輸入屬性時使用它通過執行自定義檢查來擴展變更檢測」。

要實現自定義的檢查方法，你首先需要實現.equals()方法的類SettingsClass這樣，你可以那麼寫代碼類似如下的ngDoCheck()：

ngDoCheck() { 
    if(!this.inputSettings.equals(this.previousInputSettings)) { 
     // inputSettings changed 
     // some logic here to react to the change 
     this.previousInputSettings = this.inputSettings; 
    } 
}

來源

2015-12-15 20:24:50

-4

在你的HTML你不能使用首字母大寫，將其更改爲

<my-directive [input-settings]="settings" [count]="settings.count"></my-directive>

來源

2015-12-07 11:12:54

不錯，但不會導致onChanges無法啓動。我只是在示例中輸入了錯誤信息。 – Peter

現在已經過時。由於模板中的alpha.52屬性區分大小寫。 –

的確，Angular的HTML區分大小寫，儘管HTML本身不應區分大小寫。 Angular受到批評。這也造成混亂。 – Gherman

在angular2中，如何獲取變化的屬性發生變化的對象@Input

回答

相關問題