Como detectar quando um valor @Input () é alterado no Angular?

Eu tenho um componente pai ( CategoryComponent ), um componente filho ( videoListComponent ) e um ApiService.

Eu tenho a maior parte deste trabalho bem, ou seja, cada componente pode acessar o json api e obter seus dados relevantes através de observáveis.

Atualmente, o componente da lista de vídeos obtém todos os vídeos. Gostaria de filtrar isso apenas para vídeos em uma categoria específica. Consegui isso passando o categoryId para a criança via @Input().

CategoryComponent.html

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

Isso funciona e quando a categoria pai CategoryComponent muda, o valor categoryId é passado através, @Input()mas preciso detectá-lo no VideoListComponent e solicitar novamente a matriz de vídeos via APIService (com o novo categoryId).

No AngularJS, eu teria feito um $watchsobre a variável. Qual a melhor forma de lidar com isto?

Na verdade, existem duas maneiras de detectar e agir quando uma entrada é alterada no componente filho em angular2 +:

1. 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

2. 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.

1. 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 .

2. 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 .

Use o ngOnChanges()método do ciclo de vida em seu componente.

O ngOnChanges é chamado logo após a verificação das propriedades associadas aos dados e antes da verificação dos filhos de exibição e conteúdo, se pelo menos uma delas tiver sido alterada.

Aqui estão os documentos .

Eu estava recebendo erros no console, assim como no compilador e no IDE ao usar o SimpleChangestipo na assinatura da função. Para evitar os erros, use a anypalavra - chave na assinatura.

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

EDITAR:

Como Jon apontou abaixo, você pode usar a SimpleChangesassinatura ao usar a notação de colchete em vez da notação de ponto.

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

A aposta mais segura é usar um serviço compartilhado em vez de um @Inputparâmetro. Além disso, o @Inputparâmetro não detecta alterações no tipo de objeto aninhado complexo.

Um exemplo simples de serviço é o seguinte:

Service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SyncService {

    private thread_id = new Subject<number>();
    thread_id$ = this.thread_id.asObservable();

    set_thread_id(thread_id: number) {
        this.thread_id.next(thread_id);
    }

}

Component.ts

export class ConsumerComponent implements OnInit {

  constructor(
    public sync: SyncService
  ) {
     this.sync.thread_id$.subscribe(thread_id => {
          **Process Value Updates Here**
      }
    }

  selectChat(thread_id: number) {  <--- How to update values
    this.sync.set_thread_id(thread_id);
  }
}

Você pode usar uma implementação semelhante em outros componentes e todos os seus componentes compartilharão os mesmos valores compartilhados.

Eu só quero acrescentar que existe outro gancho de ciclo de vida chamado DoCheckque é útil se o @Inputvalor não for um valor primitivo.

Eu tenho uma matriz como uma, Inputpara que isso não acione o OnChangesevento quando o conteúdo for alterado (porque a verificação feita pelo Angular é 'simples' e não profunda, portanto a matriz ainda é uma matriz, mesmo que o conteúdo da matriz tenha sido alterado).

Em seguida, implemento um código de verificação personalizado para decidir se quero atualizar minha exibição com a matriz alterada.

  @Input()
  public set categoryId(categoryId: number) {
      console.log(categoryId)
  }

por favor, tente usar este método. Espero que isto ajude

Você também pode ter um observável que aciona alterações no componente pai (CategoryComponent) e fazer o que você deseja fazer na assinatura no componente filho. (videoListComponent)

service.ts 
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);

-----------------
CategoryComponent.ts
public onCategoryChange(): void {
  service.categoryChange$.next();
}

-----------------
videoListComponent.ts
public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
});
}

Aqui o ngOnChanges será acionado sempre que sua propriedade de entrada for alterada:

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}

Esta solução usa uma classe proxy e oferece as seguintes vantagens:

• Permite que o consumidor aproveite o poder do RXJS
• Mais compacto do que outras soluções propostas até agora
• Mais seguro do que usarngOnChanges()

Exemplo de uso:

@Input()
public num: number;
numChanges$ = observeProperty(this as MyComponent, 'num');

Função útil:

export function observeProperty<T, K extends keyof T>(target: T, key: K) {
  const subject = new BehaviorSubject<T[K]>(target[key]);
  Object.defineProperty(target, key, {
    get(): T[K] { return subject.getValue(); },
    set(newValue: T[K]): void {
      if (newValue !== subject.getValue()) {
        subject.next(newValue);
      }
    }
  });
  return subject;
}

Se você não quiser usar o método ngOnChange implementar o método onChange (), também poderá se inscrever nas alterações de um item específico pelo evento valueChanges , ETC.

 myForm= new FormGroup({
first: new FormControl()   

});

this.myForm.valueChanges.subscribe(formValue => {
  this.changeDetector.markForCheck();
});

o markForCheck () escrito por causa do uso nesta declaração:

  changeDetection: ChangeDetectionStrategy.OnPush

Você também pode simplesmente passar um EventEmitter como Input. Não tenho certeza se essa é a melhor prática ...

CategoryComponent.ts:

categoryIdEvent: EventEmitter<string> = new EventEmitter<>();

- OTHER CODE -

setCategoryId(id) {
 this.category.id = id;
 this.categoryIdEvent.emit(this.category.id);
}

CategoryComponent.html:

<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>

E em VideoListComponent.ts:

@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
 this.categoryIdEvent.subscribe(newID => {
  this.categoryId = newID;
 }
}