在Angular 2上檢測屬性更改

在組件級別對屬性更改做出反應的最佳方法是什麼？我正在尋找的是每次組件的某個屬性發生更改時觸發方法的方法。這裏的一個單個部件：在Angular 2上檢測屬性更改

@Component({selector: 'component', template: '{{name}} {{number}}'}) 
class singleComp { 
    name: string = 'Old'; 
    number: number = 1; 

    changeProperties() { 
    this.name = 'New'; 
    this.number = 2; 
    } 

    changesDetected() { 
    console.log('Changes detected'); 
    } 
}

在上面的例子中，singleComp有兩個屬性name和number。這是一個簡單的例子。從changeProperties()調用changesDetected()不是一個選項，因爲組件可能有多個方法修改組件的屬性。我不想在修改屬性的每個方法的末尾調用changesDetected()，因爲這將意味着來自多個方法的多個調用。

我試圖使用OnChanges和AfterContentChecked來檢測更改，但沒有一個真正有效。這些方法檢測@input屬性的更改，但未檢測到組件內「本機」屬性的更改。

簡而言之，我正在尋找一種方法來在每次修改組件的內部屬性時觸發changesDetected()。

編輯

這是事實，ngDoCheck檢測內部的變化。但是，一旦實現它，它也將檢測外部組件的變化，並且在組件級別上並不真正有用。

來源

2017-10-13 Treeindev

可能重複[Angular 2監視組件屬性更改沒有@Input或@Output]（https://stackoverflow.com/questions/39111323/angular-2-watch-component-property- for-changes-without-input-or-output） –

@AnteJablanAdamović，我寫了一個問題，我不是在尋找'@ input'變化檢測。我對組件的本地屬性的內部更改感興趣。 – Treeindev

再次閱讀其他線程，如果你還不明白，我會建議英語語言教程。 '沒有' –

您應該使用EventEmitter或本用例。

帽子是在組件級別對屬性更改作出反應的最佳方法嗎？我正在尋找的是每次組件的某個屬性發生更改時觸發方法的方法。這裏有一個單一成分：

@Component({selector: 'component', template: '{{name}} {{number}}'}) 
class singleComp { 
    name: string = 'Old'; 
    number: number = 1; 
    private propertiesChanged: EventEmitter<any> = new EventEmitter(); 
    private _score: number; 

    get score():boolean { 
    return this._score; 
    } 

    set score(s:number) { 
    this._score = s; 
    this.propertiesChanged.emit(s); 
    } 

    constructor() { 
    this.propertiesChanged.subscrive(() => this.changesDetected()); 
    } 
    changeProperties() { 
    this.name = 'New'; 
    this.number = 2; 
    this.propertiesChanged.emit({}); // you can pass any object here, chanegd properties as well. 
    } 

    changesDetected() { 
    console.log('Changes detected'); 
    }

}

您還可以在這些屬性的制定者發出更改事件，選擇任何更有意義在你的使用情況。看到分數屬性，例如

來源

2017-10-13 14:36:49

我喜歡你的方法，但它需要在每個修改屬性的方法中實現一個新的代碼行。具有與直接調用'changesDetected（）'方法相同的效果。是否有可能將偵聽器直接附加到組件的屬性，並在每次修改時作出反應？ – Treeindev

如果你使用屬性設置器來實現這個，你不需要把它放在任何地方，你只需要把它放在setter中即可。 –

https://stackoverflow.com/a/12850536/5767992看到這個例子 –

在Angular 2上檢測屬性更改

回答

相關問題