Imaginez que j'ai deux composants, l'un étant caché lorsque l'autre est affiché, comme ceci:
<div> <componentOne [ngClass]="showComponentOne ? '' : 'hidden'"></componentOne> <componentTwo *ngIf="!showComponentOne"></componentTwo> </div>
Maintenant, componentOne inclut un assez grand image, qui est chargée à chaque fois qu'elle est initialisée. Lorsque le composant est activé, pendant une courte période, l'attribut alt-images est affiché jusqu'à ce que l'image soit chargée. Parce que c'est assez visible, je me demandais si je pouvais le résoudre comme ceci:
<div> <componentOne *ngIf="showComponentOne"></componentOne> <componentTwo *ngIf="!showComponentOne"></componentTwo> </div>
Cela serait-il considéré comme une mauvaise pratique, car le composant n'est pas supprimé du DOM quand il n'est pas utilisé? Ou est-ce bien si componentOne est assez petit? Y a-t-il une meilleure solution?
4 Réponses :
ngIf détruit le composant et le restitue alors que hidden le masque simplement. Cela dépend de votre application. Si vous devez construire le composant lorsque la condition change, utilisez ngIf. Si vous avez besoin de le précharger et de l'afficher à la demande - utilisez hidden ...
De plus, si vous voulez faire référence à un composant dans un modèle via ViewChild, vous ne pouvez pas utiliser ngIf. Parce que ce n'est pas encore rendu ... Dans ce cas - vous devez utiliser hidden.
Il suffit d'appliquer hidden. Cela ne détruira pas le composant dans le DOM, mais le cachera.
<componentOne [hidden]="showComponentOne"></componentOne>
Si la propriété showComponentOne est booléenne, elle ressemble à
<componentOne [hidden]="showComponentOne ? true : false"></componentOne>
N'est-ce pas la même chose que d'appliquer une classe cachée (sauf qu'elle est plus propre)? Le composant est toujours attaché au DOM - est-ce correct? Merci pour votre réponse!
Encore une fois, cela dépend de votre application. Si vous devez supprimer un composant du DOM, utilisez ngIf. Si vous souhaitez le masquer, utilisez hidden. Gardez à l'esprit qu'après ngIf, les modifications sont détruites et reconstruites ... En d'autres termes, imaginez le composant qui charge les données du serveur et vous voulez juste le masquer conditionnellement - utilisez hidden ... Sinon si vous voulez renouveler ses données - utilisez ngIf
Oui, il est recommandé de ne pas appliquer de classe masquée. La raison étant, la balise html particulière serait traitée, ce qui consommera de la mémoire.
Supposons que vous utilisiez masqué dans une balise de composant enfant à partir d'une balise parent, bien que le html ne soit pas visible mais que votre composant soit chargé. Et supposons que votre composant ait beaucoup d'appels d'API, alors il appellerait ces API même si elles ne sont utilisées nulle part
Je me souviens également avoir lu à quelques endroits des conseils de référencement à ne pas utiliser, même si je n'ai pas trouvé de source fiable pour le soutenir maintenant.
Merci pour votre contribution. Dans ce cas, le composant ne fait pas beaucoup de logique et aucun appel d'API du tout, donc l'application d'une classe masquée peut ne pas être un problème. Bon appel sur le référencement, je vais m'y intéresser!
Je ne dirais pas que c'est nécessairement une mauvaise pratique; Je pense qu'il s'agit de déterminer quelle approche est la mieux adaptée à votre interface et aux circonstances dans lesquelles l'image sera affichée.
Si, par exemple, vous aviez une table avec 100 lignes, dont chacune avait une image qui serait révélée une à la fois au survol de la souris, * ngIf serait (clairement, je pense) la meilleure solution, en partie à cause de la consommation de mémoire selon point d'Argo ci-dessous.
Mais dans ce cas où vous avez deux composants et en particulier si les utilisateurs vont basculer entre eux plus d'une fois, je pense que les `` cacher '' (par quelque moyen que ce soit) plutôt que de les supprimer complètement du DOM est judicieux.
Si vous basculez entre l'affichage du composant 1 ou du composant 2, je vous suggère d'utiliser une approche cohérente, c.-à-d. cachez-les tous les deux, ou utilisez ngIf pour les supprimer du DOM, plutôt que de `` cacher '' l'un et d'utiliser ngIf de l'autre, bien que cela dépende encore de votre jugement sur la meilleure approche pour votre application.
Merci pour votre réponse réfléchie, cela a beaucoup de sens. Je vais appliquer votre approche et vérifier les différences de consommation de mémoire.
Je ne pense pas que ce soit une mauvaise pratique tant que vous comprenez différents scnerio et que cela dépend également d'un cas d'utilisation spécifique:
Je dirais: vous ne devriez jamais utiliser la classe hidden si:
1.C'est la page de destination initiale du site Web, car elle diminuera les performances
2.Si sa page est énorme et que vous n'en avez pas besoin partout
Mais ng-if a également des pièges comme ceux-ci:
1.Le composant et les directives de l'élément qui est supprimé et ajouté à nouveau seront en fait recréés et leur logique d'initialisation s'exécutera à nouveau. Ceci contraste avec hidden où les choses sont toujours là en mémoire et ne sont donc initialisées qu'une seule fois. Vous devez vous assurer que votre code gère correctement la réexécution.
2.L'initialisation est parfois plus coûteuse que de garder les choses à portée de main.
3.Et vous devez utiliser hidden lorsque vous devez ajouter des éléments à l'élément parent au moment de l'exécution comme ceci: element.appendChild (aChild);