Manuelles Auslösen der Änderungserkennung in Angular

Ich schreibe eine Angular-Komponente, die eine Eigenschaft hat Mode(): string.

Ich möchte in der Lage sein, diese Eigenschaft programmgesteuert und nicht als Reaktion auf ein Ereignis festzulegen.

Das Problem ist, dass eine Vorlagenbindung ohne Browserereignis {{Mode}}nicht aktualisiert wird.

Gibt es eine Möglichkeit, diese Änderungserkennung manuell auszulösen?

Probieren Sie eines davon aus:

• ApplicationRef.tick()- ähnlich wie bei AngularJS $rootScope.$digest()- dh überprüfen Sie den vollständigen Komponentenbaum
• NgZone.run(callback)- ähnlich wie $rootScope.$apply(callback)- dh die Rückruffunktion innerhalb der Winkelzone auswerten. Ich denke, aber ich bin nicht sicher, ob dies dazu führt, dass der vollständige Komponentenbaum nach dem Ausführen der Rückruffunktion überprüft wird.
• ChangeDetectorRef.detectChanges()- ähnlich wie $scope.$digest()- dh nur diese Komponente und ihre untergeordneten Komponenten überprüfen

Sie können injizieren ApplicationRef, NgZoneoder ChangeDetectorRefin Ihrer Komponente.

Ich habe eine akzeptierte Antwortreferenz verwendet und möchte ein Beispiel anführen, da die Angular 2-Dokumentation sehr schwer zu lesen ist. Ich hoffe, dass dies einfacher ist:

1. Import NgZone:

   import { Component, NgZone } from '@angular/core';
   

2. Fügen Sie es Ihrem Klassenkonstruktor hinzu

   constructor(public zone: NgZone, ...args){}
   

3. Führen Sie den Code aus mit zone.run:

   this.zone.run(() => this.donations = donations)
   

Ich konnte es mit markForCheck () aktualisieren

Importieren Sie ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

Injizieren und instanziieren

constructor(private ref: ChangeDetectorRef) { 
}

Zum Schluss soll die Änderungserkennung stattfinden

this.ref.markForCheck();

Hier ist ein Beispiel, in dem markForCheck () funktioniert und detectChanges () nicht.

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

BEARBEITEN: In diesem Beispiel wird das Problem nicht mehr dargestellt :( Ich glaube, es wird möglicherweise eine neuere Angular-Version ausgeführt, in der es behoben ist.

(Drücken Sie STOP / RUN, um es erneut auszuführen.)

Probieren Sie in Angular 2+ den @ Input-Dekorator aus

Es ermöglicht eine nette Eigenschaftsbindung zwischen übergeordneten und untergeordneten Komponenten.

Erstellen Sie zunächst im übergeordneten Element eine globale Variable, die das Objekt / die Eigenschaft enthält, die an das untergeordnete Element übergeben werden.

Erstellen Sie als Nächstes eine globale Variable im untergeordneten Element, um das vom übergeordneten Objekt übergebene Objekt / die Eigenschaft zu speichern.

Fügen Sie dann im übergeordneten HTML-Code, in dem die untergeordnete Vorlage verwendet wird, eine eckige Klammer mit dem Namen der untergeordneten Variablen hinzu und setzen Sie sie gleich dem Namen der übergeordneten Variablen. Beispiel:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

Fügen Sie schließlich, wo die untergeordnete Eigenschaft in der untergeordneten Komponente definiert ist, den Eingabe-Dekorator hinzu:

@Input()
public childVariable: any

Wenn Ihre übergeordnete Variable aktualisiert wird, sollte sie die Aktualisierungen an die untergeordnete Komponente übergeben, die ihr HTML aktualisiert.

Um eine Funktion in der untergeordneten Komponente auszulösen, werfen Sie einen Blick auf ngOnChanges.

ChangeDetectorRef.detectChanges () - ähnlich wie $ scope. $ Digest () - dh nur diese Komponente und ihre untergeordneten Komponenten überprüfen