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?

243
demandé sur Lazar Ljubenović 2016-01-16 16:09:13

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.

427
répondu Mark Rajcok 2017-12-16 21:34:12

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:

  1. Importer NgZone :

    import { Component, NgZone } from '@angular/core';
    
  2. ajoutez-le à votre constructeur de classe

    constructor(public zone: NgZone, ...args){}
    
  3. Exécuter du code avec zone.run :

    this.zone.run(() => this.donations = donations)
    
81
répondu juanpastas 2017-03-06 17:04:12

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)

45
répondu Nuno Tomas 2017-08-25 16:33:56

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.

2
répondu Jeremy Swagger 2017-12-22 16:18:48