Quelle est la différence entre OnChanges et DoCheck Angulaire 2?
Différence entre eux semble être très confus pour moi.
Quelle est la différence entre eux et exactement où ils sont appelés
Vous devez vous connecter pour publier un commentaire.
Différence entre eux semble être très confus pour moi.
Quelle est la différence entre eux et exactement où ils sont appelés
Vous devez vous connecter pour publier un commentaire.
ngOnChanges()
(OnChanges
) est appelée lorsqu'une valeur lié à une entrée a changé de sorte que vous pouvez exécuter du code personnalisé lorsqu'une entrée a changé.ngDoCheck()
(DoCheck
) est appelée lors de la détection de changement de pistes de sorte que vous pouvez mettre en œuvre votre personnalisé détection de changement de l'action.addEventListener
,setTimeout
, ... à Chaque fois qu'un gestionnaire d'événements ou de certaines autres async code est terminé ou lorsque la détection de changement est invoquée explicitement par un code, Angular2 pistes de détection de changement. C'est quandngDoCheck
est appelé.ngOnChanges
n'est appelée que lorsque le changement de détection détecte un changement qui nécessite une entrée d'être mis à jour.ngOnChanges
à être appelé.Je jouais avec ces deux et trouvé des trucs intéressant que le partage de la valeur :
ngDoCheck()
:Ce sera appelée chaque fois qu'une Zone de crochets appelés,
Comment?
Angular2 utilise NgZone, qui comme @Gunter dit ainsi, a singe patché tous les évènements asynchrones dans le navigateur, vous pouvez la considérer comme ;
De sorte que chaque fois que vous exécutez
setTimeout
, vous êtes en fait l'appel à la fonction qui est singe patché l'originalsetTimeout
.De toute façon, de sorte que chaque fois que vous exécutez un
setTimeout
(ou toute autre fonction async), quand il est terminé,ngDoCheck
sera appelée.Donc, cela signifie angulaire vérifie juste pour voir si il y a eu un changement dans le modèle ou de la @entrées ou pas.
Lorsque cela est à portée de main?
ngDoCheck
devient utile si votre composantChangeDetectionStrategy
est OnPush, ce qui signifie que c'est seulement va mettre à jour l'affichage si l'un des @Entrées de références a été changé.Qu'il y a des cas que vous souhaitez utiliser OnPush mais vous voulez faire une mise à jour manuelle sur chaque case.
Découvrez ce plunker .
Vous verrez que même si le
ChangeDetectionStrategy
de laon-push-test
composant estOnPush
, lorsque l'on clique sur muter les aliments et qui se transforme le aliments liste, je vais courir lemarkForCheck
à l'intérieur de langDoCheck
et mise à jour de la vue après un mannequinif
condition.Cela signifie donc, cette fonction sera appelée BEAUCOUP !!! donc attention à ce que vous mettez à l'intérieur.
Donc en bref :
ngDoCheck
: cette fonction sera appelée à chaque fois qu'un événement est déclenché dans le app qui peut entraîner un changement, mais pas nécessairement est considéré comme un changement.ngOnChanges
Cela, et uniquement me demande si il y a eu une référence changement dans l' @Entrées liaisons, quel que soit le
ChangeDetectionStrategy
du composant.Donc, si nous muter aliments tableau comme ceci :
La
ngOnChanges
ne seront pas appelés, mais si nous mettons à jour la référence comme ceci:Il va avoir appelé.
Tout d'abord Bravo pour les réponses ci-dessus.
Je suis l'ajout d'un cas d'utilisation pour les deux fonctions que j'ai rencontrés personnellement.
ngOnChanges() (OnChanges)
: pour détecter les changements pour les variables passées par valeurngDoCheck() (DoCheck)
: pour détecter les changements de variable passée par référence commearrays
, qui ne sont pas détectés parngOnChanges()
que l'ancienne valeur et la nouvelle valeur ont la même référencengDoCheck
Il est appelé sur le composant enfant lorsque le parent composant est en cours de vérification.ngOnChanges
Il est déclenché à chaque fois lorsque l'angle détecté un changement lié aux données d'entrée de la propriété.ngOnChanges
ne se déclenche pas lorsque l'entrée de la propriété est un tableau/objet, car Angulaire utilise sale vérification de comparer les propriétés.ngOnCheck
ne se déclenche lorsque l'entrée de la propriété est un tableau/objet comme client de classe etc.