Angular — Optimiser le rendu en utilisant ChangeDetectionStrategy

Default vs OnPush

Considérez le composant suivant avec une entrée myInput et une valeur interne appelée someInternalValue. Les deux sont utilisés dans un template de composant.

Par défaut, la propriété changeDetection: dans le décorateur de composants sera définie sur ChangeDetectionStrategy.Default; implicite dans l’exemple. Dans cette situation, toute modification des valeurs dans le template déclenchera une restitution de MyComponent. En d’autres termes, si je change myInput ou un someInternalValue angular va exercer de l’énergie et restituer le composant.

Supposons toutefois que nous ne voulions effectuer une restitution que lorsque les entrées changent. Considérons le composant suivant avec
changeDetection: défini sur ChangeDetectionStrategy.OnPush

En définissant changeDetection: sur ChangeDetectionStrategy.OnPush, MyComponent ne sera restitué que lorsque ses entrées changement. Dans ce cas, myInput devra recevoir une nouvelle valeur de son parent pour déclencher un nouveau rendu.