Dans AngularJS 1, si vous souhaitez basculer l’état d’affichage des éléments DOM, vous utiliserez probablement les commandes intégrées dans AngularJS 1, comme ng-show ou ng-hide :
Exemple d’AngularJS 1 :
Dans angular2, la nouvelle syntaxe du modèle permet de lier des expressions à toutes les propriétés natives des éléments DOM. Cette fonctionnalité absolument géniale ouvre des possibilités infinies. L’une d’elles consiste à lier l’expression à la propriété cachée native, ce qui ressemble un peu à ng-show, et définit également affichage : none pour l’élément :
[Exemple caché] d’Angular2 (non recommandé) :
À première vue, l’exemple ci-dessus semble être ng-show dans AngularJS 1. En fait, c’est le cas ! Différences importantes.
ng-show et ng-hide contrôlent tous deux l’état d’affichage des éléments DOM via une classe CSS appelée ng-hide, qui règle simplement l’élément comme affichant : none. L’essentiel ici, c’est qu’AngularJS 1 a été ajouté à la classe ng-hide ! important, qui ajuste la priorité de la classe afin qu’elle puisse remplacer l’attribution de l’attribut d’affichage de l’élément par rapport à d’autres styles.
Pour revenir à cet exemple, le style display : none sur l’attribut caché natif est implémenté par le navigateur. La plupart des navigateurs ne l’utilisent pas ! il est important d’ajuster sa priorité. Par conséquent, contrôler l’état d’affichage d’un élément en utilisant [hidden]="expression » peut facilement être accidentellement écrasé par d’autres styles. Par exemple : si j’écris un tel style pour cet élément ailleurs, display : flex, cela prime sur la propriété cachée native (voir ici).
Pour cette raison, nous utilisons généralement *ngIf pour basculer l’état de présence de l’élément afin d’atteindre le même objectif :
*ngIf exemple d’angulaire2 (recommandé) :
Contrairement à la propriété cachée native, *ngIf dans angulaire2 n’est pas contraint par style. Peu importe le type de CSS que vous écrivez, elle est en sécurité. Cependant, il est tout de même nécessaire de mentionner que *ngIf ne contrôle pas l’état d’affichage de l’élément, mais obtient directement l’effet d’affichage ou non en ajoutant ou en retirant l’élément du modèle.
Bien sûr, vous pouvez aussi ajouter une priorité cachée à l’attribut caché d’un élément en utilisant un style global, comme display : non !important, pour obtenir cet effet. Vous vous demandez peut-être, puisque le groupe angulaire connaît ces problèmes, pourquoi ne pas simplement ajouter un style caché global de priorité élevée au style caché dans le cadre ? La réponse est que nous ne pouvons pas garantir que l’ajout de styles globaux soit le meilleur choix pour toutes les applications. Parce que cette approche casse en réalité la fonctionnalité qui repose sur des capacités cachées natives, nous laissons le choix aux ingénieurs.
|
Publié sur 22/05/2019 14:02:02
|
|
|
