Na verdade, existem duas maneiras de detectar e agir quando uma entrada é alterada no componente filho em angular2 +:
- Você pode usar o método do ciclo de vida ngOnChanges () como também mencionado nas respostas mais antigas:
@Input() categoryId: string;
ngOnChanges(changes: SimpleChanges) {
this.doSomething(changes.categoryId.currentValue);
// You can also use categoryId.previousValue and
// categoryId.firstChange for comparing old and new values
}
Links da documentação: ngOnChanges, SimpleChanges, SimpleChange
Demo Exemplo: Veja este desentupidor
- Como alternativa, você também pode usar um configurador de propriedades de entrada da seguinte maneira:
private _categoryId: string;
@Input() set categoryId(value: string) {
this._categoryId = value;
this.doSomething(this._categoryId);
}
get categoryId(): string {
return this._categoryId;
}
Link da documentação: veja aqui .
Exemplo de demonstração: olhe para este afunilador .
QUE ABORDAGEM DEVE USAR?
Se o seu componente tiver várias entradas, se você usar ngOnChanges (), todas as alterações serão obtidas de todas as entradas de uma vez dentro de ngOnChanges (). Usando essa abordagem, você também pode comparar os valores atuais e anteriores da entrada que foi alterada e executar as ações adequadamente.
No entanto, se você quiser fazer algo quando apenas uma única entrada específica for alterada (e você não se importa com as outras entradas), pode ser mais simples usar um configurador de propriedades de entrada. No entanto, essa abordagem não fornece uma maneira integrada de comparar valores anteriores e atuais da entrada alterada (o que você pode fazer facilmente com o método do ciclo de vida ngOnChanges).
EDIT 2017-07-25: A DETECÇÃO DAS MUDANÇAS ANGULARES PODE AINDA NÃO FOGO SOB ALGUMAS CIRCUNSTÂNCIAS
Normalmente, a detecção de alterações para o setter e ngOnChanges será acionada sempre que o componente pai alterar os dados que passa para o filho, desde que os dados sejam um tipo de dados primitivo JS (string, número, booleano) . No entanto, nos seguintes cenários, ele não será acionado e você precisará executar ações extras para fazê-lo funcionar.
Se você estiver usando um objeto ou matriz aninhada (em vez de um tipo de dados primitivo JS) para passar dados de Pai para Filho, a detecção de alterações (usando o setter ou ngchanges) poderá não ser acionada, como também mencionado na resposta do usuário: muetzerich. Para soluções, veja aqui .
Se você estiver modificando dados fora do contexto angular (ou seja, externamente), o angular não saberá das alterações. Pode ser necessário usar o ChangeDetectorRef ou o NgZone em seu componente para conscientizar angularmente as alterações externas e, assim, acionar a detecção de alterações. Consulte isso .