在Angular 2上檢測屬性更改

Question

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

@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檢測內部的變化。但是，一旦實現它，它也將檢測外部組件的變化，並且在組件級別上並不真正有用。

Answer 1

您應該使用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'); 
    } 

}

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