Pourquoi avons-nous besoin de " ngDoCheck`
Je n'arrive pas à comprendre pourquoi j'ai besoin de ngDoCheck
cycle de vie du crochet, autres que pour la simple notification, en particulier la façon dont l'écriture de code à l'intérieur de cela fait une différence en ce qui concerne la détection de changement. La plupart des exemples que j'ai trouvés montrent inutile d'exemples, comme cette une, avec un tas de fonctionnalité de journalisation.
Aussi, dans les classes générées je ne vois pas qu'il soit utilisé pour autre chose que de la simple notification:
conmponent/wrapper.ngfactory.js
Wrapper_AppComponent.prototype.ngDoCheck = function(view,el,throwOnChange) {
var self = this;
var changed = self._changed;
self._changed = false;
if (!throwOnChange) {
if (changed) {
jit_setBindingDebugInfoForChanges1(view.renderer,el,self._changes);
self._changes = {};
}
self.context.ngDoCheck(); <----------- this calls ngDoCheck on the component
but the result is not used
anywhere and no params are passed
}
return changed;
};
Vous devez vous connecter pour publier un commentaire.
Cet excellent article Si vous pensez que
ngDoCheck
signifie que votre composant est en cours de vérification lire cet article explique l'erreur en profondeur.Le contenu de cette réponse est fondée sur l'angle de la version 2.x.x. Pour la plus récente version 4.x.x voir ce post.
Il n'y a rien sur internet sur le fonctionnement interne de détection de changement, donc j'ai dû passer environ une semaine de débogage sources, de sorte que cette réponse sera assez technique sur les détails.
Angulaire de l'application est un arbre de vues (
AppView
classe qui est prolongée par la Composante spécifique de la classe générée par le compilateur). Chaque point de vue a une détection de changement de mode de vie danscdMode
de la propriété. La valeur par défaut pourcdMode
estChangeDetectorStatus.CheckAlways
, qui estcdMode = 2
.Lors d'un changement de cycle de détection exécution, chaque parent vue vérifie si il doit effectuer la détection de changement sur la vue enfant ici:
où
this
points à lachild
vue. Donc, sicdMode
estChangeDetectorStatus.Checked=1
, la détection de changement est ignorée pour les enfants immédiats et tous ses descendants à cause de cette ligne.Ce
changeDetection: ChangeDetectionStrategy.OnPush
n'est tout simplement fixecdMode
àChangeDetectorStatus.CheckOnce = 0
, donc après la première exécution de détection de changement de la vue enfant aura soncdMode
ensemble deChangeDetectorStatus.Checked = 1
en raison de ce code:Qui signifie que la prochaine fois qu'un changement de cycle de détection commence il n'y aura pas de changement de détection effectuée pour la vue enfant.
Il y a quelques options sur la manière d'exécuter la détection de changement de ce point de vue. La première est de modifier la vue enfant est
cdMode
àChangeDetectorStatus.CheckOnce
, ce qui peut être fait en utilisantthis._changeRef.markForCheck()
dansngDoCheck
cycle de vie du crochet:Cela change simplement de
cdMode
de la vue actuelle et de ses parents deChangeDetectorStatus.CheckOnce
, la prochaine fois que le changement de la détection est effectuée à l'affichage actuel est cochée.Vérifier un exemple complet ici, dans les sources, mais voici l'essentiel:
La deuxième option est de les appeler
detectChanges
sur la vue elle-même qui exécuter la détection de changement sur la vue actuelle sicdMode
n'est pasChangeDetectorStatus.Checked
ouChangeDetectorStatus.Errored
. Depuis, lesonPush
angulaire fixecdMode
àChangeDetectorStatus.CheckOnce
, angulaire va exécuter la détection de changement.Donc
ngDoCheck
ne modifie pas le changement de détection, il est simplement appelé à chaque changé de détection de cycle et c'est le seul travail est de définir la vue actuellecdMode
commecheckOnce
, de sorte que lors de la prochaine détection de changement de cycle, il est vérifié pour les modifications. Voir cette réponse pour plus de détails. Si le point de vue actuel de la détection de changement de mode estcheckAlways
(activée par défaut si onPush stratégie n'est pas utilisé),ngDoCheck
semblent être d'aucune utilité.La
DoCheck
interface est utilisé pour détecter des changements manuellement lequel l'angle de détection de changement de l'avoir négligé. Une utilisation qui pourrait en être lorsque vous modifiez laChangeDetectionStrategy
de votre composant, mais vous savez qu'une propriété d'un objet va changer.Il est plus efficace de vérifier pour ce seul changement, que de laisser l'changeDetector courir à travers l'ensemble de votre composant
Si vous utilisez
obj.iChange
à l'intérieur de votre modèle, angulaire ne le détecte pas si cette valeur est modifiée, parce que la référence deobj
lui-même ne change pas. Vous avez besoin de mettre en œuvre unngDoCheck
pour vérifier si la valeur a changé, et demander undetectChanges
sur votre composant changeDetector.De l'angle de la documentation sur
DoCheck
testé exemple
ngDoChanges
. Comment est-il lié àngDoCheck
?DoCheck
, vous avez besoin de déclencher la détection de changement manuellement si l'objet ref ne change pas.DoCheck
.OnChanges
est déclenché lorsque l'angle de changement de détecteur de fait détecte un changement.DoCheck
est utilisé pour détecter manuellement les changements qui angulaire changedetector en oubliengDoCheck
mise en œuvre de votre exemple?ngDoCheck
méthode, la valeur ne sera pas mise à jourdetectChanges
il n'a pasthis._changeRef.detectChanges();
est sans doute ce qui manquait dans ma compréhension.changeDetection: ChangeDetectionStrategy.OnPush
ligne à l'intérieur de la@Component
annotation dansTestDoCheckComponent
Fixe plunker: plnkr.co/modifier/lwy2bcCVS1CwEtGlsYfq?p=previewDoCheck
. C'est bizarre mais, je peux simuler correctement sur mon propre projet, mais oui, dans le plunkr il ne semble pas fonctionner. Autant que je sache, il devrait y avoir unDoCheck
après l'intervalle, quel que soit leChangeDetectionStrategy
. Notez bien que je suis en train de travailler avec la dernière angulaire de la version 4OnPush
, il ignore leDoCheck
modifications dans le template :/ (j'ai juste voulu fixer les plunker :P)doCheck
. J'ai passé une semaine à essayer de comprendre le fonctionnement interne et s'il vous plaît voir mes constatations ici.Salut, Maxime @AngularInDepth.com
La vue est mise à jour sans appel cette.réf.markForCheck(). Je l'ai testé dans consturctor et ngOnInit. Cochez cette
CheckOnce
, l'état que je suis de mentionner dans ma réponse, par exemple, l'utilisationChangeDetectionStrategy.OnPush