Déclenchement manuel de la détection des modifications dans Angular

J'écris un composant angulaire qui a une propriété Mode(): string.

Je voudrais pouvoir définir cette propriété par programme, pas en réponse à un événement.

Le problème est qu'en l'absence d'un événement de navigateur, une liaison de modèle {{Mode}}n'est pas mise à jour.

Existe-t-il un moyen de déclencher cette détection de changement manuellement?

Essayez l'une de ces options:

• ApplicationRef.tick()- similaire à AngularJS $rootScope.$digest()- c.-à-d., vérifiez l'arborescence complète des composants
• NgZone.run(callback)- similaire à $rootScope.$apply(callback)- c.- à -d. évaluer la fonction de rappel à l'intérieur de la zone angulaire. Je pense, mais je ne suis pas sûr, que cela finit par vérifier l'arborescence complète des composants après l'exécution de la fonction de rappel.
• ChangeDetectorRef.detectChanges()- similaire à $scope.$digest()- c.- à -d., cochez uniquement ce composant et ses enfants

Vous pouvez injecter ApplicationRef, NgZoneou ChangeDetectorRefdans votre composant.

J'ai utilisé une référence de réponse acceptée et je voudrais mettre un exemple, car la documentation Angular 2 est très très difficile à lire, j'espère que c'est plus facile:

1. Importer NgZone:

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

2. Ajoutez-le à votre constructeur de classe

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

3. Exécutez le code avec zone.run:

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

J'ai pu le mettre à jour avec markForCheck ()

Importer ChangeDetectorRef

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

Injecter et instancier

constructor(private ref: ChangeDetectorRef) { 
}

Enfin, marquez la détection des changements

this.ref.markForCheck();

Voici un exemple où markForCheck () fonctionne et detectChanges () ne fonctionne pas.

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

EDIT: Cet exemple ne décrit plus le problème :( Je pense qu'il pourrait exécuter une version angulaire plus récente où il est résolu.

(Appuyez sur STOP / RUN pour l'exécuter à nouveau)

Dans Angular 2+, essayez le décorateur @Input

Il permet une belle liaison de propriété entre les composants parent et enfant.

Créez d'abord une variable globale dans le parent pour contenir l'objet / la propriété qui sera transmis à l'enfant.

Créez ensuite une variable globale dans l'enfant pour contenir l'objet / la propriété transmis par le parent.

Ensuite, dans le html parent, où le modèle enfant est utilisé, ajoutez une notation entre crochets avec le nom de la variable enfant, puis définissez-la égale au nom de la variable parent. Exemple:

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

Enfin, lorsque la propriété enfant est définie dans le composant enfant, ajoutez le décorateur d'entrée:

@Input()
public childVariable: any

Lorsque votre variable parent est mise à jour, elle doit transmettre les mises à jour au composant enfant, qui mettra à jour son code HTML.

De plus, pour déclencher une fonction dans le composant enfant, jetez un œil à ngOnChanges.

ChangeDetectorRef.detectChanges () - similaire à $ scope. $ Digest () - c'est-à-dire, vérifiez uniquement ce composant et ses enfants