Wie erkenne ich, wenn sich ein @ Input () -Wert in Angular ändert?

Ich habe eine übergeordnete Komponente ( CategoryComponent ), eine untergeordnete Komponente ( videoListComponent ) und einen ApiService.

Ich habe das meiste davon in Ordnung, dh jede Komponente kann auf die JSON-API zugreifen und ihre relevanten Daten über Observables abrufen.

Derzeit erhält die Videolistenkomponente nur alle Videos. Ich möchte dies nur nach Videos in einer bestimmten Kategorie filtern. Dies habe ich erreicht, indem ich die categoryId über an das Kind übergeben habe @Input().

CategoryComponent.html

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

Dies funktioniert und wenn sich die übergeordnete CategoryComponent-Kategorie ändert, wird der categoryId-Wert über weitergeleitet, @Input()aber ich muss dies in VideoListComponent erkennen und das Video-Array über APIService (mit der neuen categoryId) erneut anfordern.

In AngularJS hätte ich eine $watchVariable erstellt. Was ist der beste Weg, um damit umzugehen?

Tatsächlich gibt es zwei Möglichkeiten, um zu erkennen und darauf zu reagieren, wenn sich eine Eingabe in der untergeordneten Komponente in angle2 + ändert:

1. Sie können die Lebenszyklusmethode ngOnChanges () verwenden, wie auch in älteren Antworten erwähnt:

    @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

    }

Dokumentationslinks: ngOnChanges, SimpleChanges, SimpleChange
Demo Beispiel: Sehen Sie sich diesen Plunker an

2. Alternativ können Sie auch einen Eingabe-Eigenschaften-Setter wie folgt verwenden:

    private _categoryId: string;

    @Input() set categoryId(value: string) {

       this._categoryId = value;
       this.doSomething(this._categoryId);

    }

    get categoryId(): string {

        return this._categoryId;

    }

Dokumentationslink: Schauen Sie hier .

Demo-Beispiel: Sehen Sie sich diesen Plunker an .

Welchen Ansatz sollten Sie verwenden?

Wenn Ihre Komponente mehrere Eingaben hat, erhalten Sie bei Verwendung von ngOnChanges () alle Änderungen für alle Eingaben gleichzeitig in ngOnChanges (). Mit diesem Ansatz können Sie auch aktuelle und vorherige Werte der geänderten Eingabe vergleichen und entsprechende Maßnahmen ergreifen.

Wenn Sie jedoch etwas tun möchten, wenn sich nur eine bestimmte Eingabe ändert (und Sie sich nicht um die anderen Eingaben kümmern), ist es möglicherweise einfacher, einen Eingabe-Eigenschaftssetzer zu verwenden. Dieser Ansatz bietet jedoch keine integrierte Möglichkeit, frühere und aktuelle Werte der geänderten Eingabe zu vergleichen (was mit der ngOnChanges-Lebenszyklusmethode problemlos möglich ist).

EDIT 2017-07-25: ANGULAR CHANGE DETECTION KANN UNTER EINIGEN UMSTÄNDEN NOCH NICHT FEUERN

Normalerweise wird die Änderungserkennung sowohl für Setter als auch für ngOnChanges ausgelöst, wenn die übergeordnete Komponente die Daten ändert, die an das untergeordnete Element übergeben werden, vorausgesetzt, die Daten sind ein primitiver JS-Datentyp (Zeichenfolge, Zahl, Boolescher Wert) . In den folgenden Szenarien wird es jedoch nicht ausgelöst und Sie müssen zusätzliche Maßnahmen ergreifen, damit es funktioniert.

1. Wenn Sie ein verschachteltes Objekt oder Array (anstelle eines primitiven JS-Datentyps) verwenden, um Daten von Parent zu Child zu übergeben, wird die Änderungserkennung (entweder mit Setter oder ngchanges) möglicherweise nicht ausgelöst, wie auch in der Antwort des Benutzers: muetzerich erwähnt. Lösungen finden Sie hier .

2. Wenn Sie Daten außerhalb des Winkelkontexts (dh extern) mutieren, kennt Angular die Änderungen nicht. Möglicherweise müssen Sie ChangeDetectorRef oder NgZone in Ihrer Komponente verwenden, um externe Änderungen im Winkel zu erkennen und damit die Änderungserkennung auszulösen. Beziehen Sie sich darauf .

Verwenden Sie die ngOnChanges()Lebenszyklusmethode in Ihrer Komponente.

ngOnChanges wird direkt nach dem Überprüfen der datengebundenen Eigenschaften und vor dem Überprüfen von untergeordneten Ansichts- und Inhaltseigenschaften aufgerufen, wenn mindestens eine davon geändert wurde.

Hier sind die Dokumente .

Bei der Verwendung des SimpleChangesTyps in der Funktionssignatur wurden Fehler in der Konsole sowie im Compiler und in der IDE angezeigt. Verwenden Sie anystattdessen das Schlüsselwort in der Signatur, um Fehler zu vermeiden .

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

BEARBEITEN:

Wie Jon weiter unten ausgeführt hat, können Sie die SimpleChangesSignatur verwenden, wenn Sie die Klammernotation anstelle der Punktnotation verwenden.

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

Am sichersten ist es, einen gemeinsamen Dienst anstelle eines @InputParameters zu verwenden. Außerdem @Inputerkennt der Parameter keine Änderungen im komplexen verschachtelten Objekttyp.

Ein einfacher Beispieldienst lautet wie folgt:

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);
  }
}

Sie können eine ähnliche Implementierung in anderen Komponenten verwenden, und alle Ihre Komponenten haben dieselben gemeinsamen Werte.

Ich möchte nur hinzufügen, dass es einen weiteren Lifecycle-Hook DoCheckgibt, der nützlich ist, wenn der @InputWert kein primitiver Wert ist.

Ich habe ein Array als, Inputdaher wird das OnChangesEreignis nicht ausgelöst, wenn sich der Inhalt ändert (da die Überprüfung, die Angular durchführt, "einfach" und nicht tief ist, sodass das Array immer noch ein Array ist, obwohl sich der Inhalt des Arrays geändert hat).

Anschließend implementiere ich einen benutzerdefinierten Überprüfungscode, um zu entscheiden, ob ich meine Ansicht mit dem geänderten Array aktualisieren möchte.

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

Bitte versuchen Sie es mit dieser Methode. Hoffe das hilft

Sie können auch eine Observable haben, die Änderungen in der übergeordneten Komponente (CategoryComponent) auslöst, und das tun, was Sie in der Subskription in der untergeordneten Komponente tun möchten. (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
});
}

Hier wird ngOnChanges immer ausgelöst, wenn sich Ihre Eingabeeigenschaft ändert:

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

Diese Lösung verwendet eine Proxy- Klasse und bietet die folgenden Vorteile:

• Ermöglicht dem Verbraucher, die Leistung von RXJS zu nutzen
• Mehr kompakter als andere Lösungen bisher vorgeschlagen
• Mehr typsicher als die Verwendung vonngOnChanges()

Anwendungsbeispiel:

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

Dienstprogrammfunktion:

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;
}

Wenn Sie die ngOnChange-Implementierungsmethode og onChange () nicht verwenden möchten, können Sie Änderungen eines bestimmten Elements auch über das valueChanges-Ereignis ETC. abonnieren .

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

});

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

Das markForCheck () wurde aufgrund der Verwendung in dieser Deklaration geschrieben:

  changeDetection: ChangeDetectionStrategy.OnPush

Sie können auch einfach einen EventEmitter als Eingabe übergeben. Ich bin mir nicht ganz sicher, ob dies die beste Vorgehensweise ist, obwohl ...

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>

Und in VideoListComponent.ts:

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