Angular 2：如何檢測組件上輸入屬性的屬性更改？

Question

我有一個角2控制器，它看起來是這樣的：

@Component({ 
    selector: 'my-component', 
    template: '<div>The value is: {{ value }}</div>', 
}) 
class MyComponent implements OnInit { 
    @Input() 
    value: string; 

    @Output 
    valueChange = new EventEmitter<number>(); 

    ngOnInit() { 
    this.valueChange.subscribe(value => { 
     console.log('new value:', value); // <-- does not get triggered 
    }); 
    } 
} 

但是，當從模板value的值更改綁定：

<my-component [value]="someValue" /> <!-- valueChange not triggered! --> 

的valueChange事件不會被觸發的話，即使模板正確更新並顯示新值，組件也不知道它已更改。

如何檢測控制器上的輸入屬性何時更改？

Answer 1

我已經能夠從OnChanges落實解決此問題：

ngOnChanges(changes) { 
    for (let key in changes) { 
    if (this[key + 'Change']) 
     this[key + 'Change'].emit(changes[key].currentValue); 
    } 
} 

，它會自動觸發Change事件每當角檢測的改變......但有什麼辦法本身做到這一點？

Answer 2

在我看來，Output是你的組件發出事件給他人，所以他們會更新他們的觀點，如果有必要，它應該只用於內部需要廣播出來的更改（因此名稱Output）。在Input上觸發Output事件的更改可能會導致意外的行爲（因爲現在valueChange已針對內部和外部的所有更改觸發，而不再是Output）。

在你的情況，如果你想要做的東西，當你value的變化，你可以把它二傳手：

private _value: string; 
get value(): string { 
    return this._value; 
} 

@Input('value') 
set value(val: string) { 
    this._value = val; 
    console.log('new value:', value); // <-- do your logic here! 
} 

Answer 3

我用setter方法時，輸入變量已被修改檢測。你必須使用在@Component裝飾，而不是@Input聲明inputs鍵得到這個工作，像這樣：

@Component({ 
    selector: 'my-component', 
    template: '<div>The value is: {{ value }}</div>', 
    inputs: ['value'] 
}) 
class MyComponent { 
    private _value: string; 

    @Output 
    valueChange = new EventEmitter<number>(); 

    set value(value) { 
    this._value = value; 
    console.log('new value:', value); 
    this.valueChange.emit(value); 
    } 

    get value(value) { 
    return this._value; 
    } 
} 

此外僅供參考，類方法是ngOnInit，而不是onInit。