角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から実装することで問題を回避することができました：角度が変更を検出するたびに自動的にChangeイベントをトリガーします

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

...しかし、ネイティブにこれを行う方法はありますか？必要であれば、彼らは自分のビューを更新しますので、あなたのコンポーネントが他の人にイベントを放出するための私の意見では

Answer 2

、Outputは、それだけにブロードキャストする必要があり、内部で行われた変更（その名のOutput）のために使用すべきです。 イベントをトリガーすると、Inputの変更により、予期しない動作が発生する可能性があります（今度は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

。あなたはそうのように、仕事にこれを取得する代わりに@Input宣言の@Componentデコレータで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; 
    } 
} 

またFYI、クラスメソッドはngOnInit代わりのonInitです。