Déclenchement manuel de la détection de changement en angle
j'écris un composant angulaire qui a une propriété Mode(): string
. Je voudrais être en mesure de définir cette propriété par programmation non pas en réponse à un événement. Le problème est qu'en l'absence d'un événement de navigateur, un template liant {{Mode}}
ne se met pas à jour. Est-il un moyen pour déclencher ce changement de détection manuellement?
4 réponses
essayez l'un de ceux-ci:
-
ApplicationRef.tick()
- similaire au$rootScope.$digest()
D'AngularJS, c'est-à-dire vérifier l'arbre complet des composants -
NgZone.run(callback)
- semblable à$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 finisse par vérifier l'arborescence complète des composants Après avoir exécuté la fonction de rappel. -
ChangeDetectorRef.detectChanges()
- semblable à$scope.$digest()
-- c.-à-d., vérifier seulement ce composant et ses enfants
Vous pouvez injecter ApplicationRef
, NgZone
, ou ChangeDetectorRef
dans votre composant.
j'ai utilisé la référence de réponse acceptée et je voudrais mettre un exemple, puisque la documentation angulaire 2 est très difficile à lire, j'espère que c'est plus facile:
-
Importer
NgZone
:import { Component, NgZone } from '@angular/core';
-
ajoutez-le à votre constructeur de classe
constructor(public zone: NgZone, ...args){}
-
Exécuter du code avec
zone.run
:this.zone.run(() => this.donations = donations)
j'ai pu le mettre à jour avec markForCheck ()
Import ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';
injecter et instantiate it
constructor(private ref: ChangeDetectorRef) {
}
finalement marquer la détection de changement pour avoir lieu
this.ref.markForCheck();
voici un exemple où markForCheck() fonctionne et détectchanges() ne fonctionne pas.
https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview
EDIT: cet exemple ne dépeint plus le problème: (je pense qu'il pourrait être en train d'exécuter une nouvelle version angulaire où il est fixé.
(Appuyez sur la touche marche/ARRÊT de l'exécuter à nouveau)
en angle 2+, Essayez le décorateur @Input
il permet une certaine liaison de propriété agréable entre le parent et l'enfant composants.
créer D'abord une variable globale dans le parent pour contenir l'objet / la propriété qui sera transmis à l'enfant.
créer ensuite une variable globale dans l'enfant pour tenir l'objet/propriété passé de la société mère.
puis dans le html parent, lorsque le modèle enfant est utilisé, ajouter les crochets notation avec le nom de la variable de l'enfant, puis mettez-le égal au nom de la variable parent. Exemple:
<child-component-template [childVariable] = parentVariable>
</child-component-template>
enfin, si le bien de l'enfant est défini dans la composante relative à l'enfant, ajouter la Entrée décorateur:
@Input()
public childVariable: any
lorsque votre variable parent est mise à jour, elle devrait transmettre les mises à jour au composant enfant, qui mettra à jour son html.
aussi, à déclenchez une fonction dans le composant enfant, regardez ngOnChanges.