Nous venons d'avoir une brève introduction aux directives attribuées dans la conférence précédente.
Construisons maintenant une directive d'attribut personnalisée pour notre application angulaire, puis
en faire usage dans les vues de certains des composants de notre application angulaire.
En cours de route, nous allons apprendre comment créer des directives personnalisées
et les utiliser dans notre application Angular.
Nous allons utiliser l'interface de ligne de commande angulaire pour créer la directive personnalisée et par la suite,
la mettre à jour pour effectuer le type de fonctionnalités
dont nous avons besoin par cette directive attributaire.
Sous la directive garder la directive dans un dossier distinct nommé Directives,
dans mon dossier d'application.
Alors, permettez-moi de créer un nouveau dossier nommé Directives.
Maintenant, je vais créer ma directive personnalisée dans ce dossier Directives.
prendra l'aide de l'interface de ligne de commande angulaire pour créer notre directive personnalisée.
Donc, à l'invite,
type ng generate ou g detectives/highlight.
Donc, cette directive particulière va s'appeler la directive Highlight.
Donc, avec cela, nous allons créer
une nouvelle directive appelée la directive highlight, puis nous allons maintenant aller
et éditer ces fichiers de directive highlight que
ont été créés pour créer notre directive personnalisée.
Qu'est-ce que j'essaie de réaliser exactement avec cette directive ?
Laissez-moi vous emmener à la vue du menu dans notre application Angular.
Dans la vue du menu,
quand je veux sélectionner l'un de ces éléments actuellement,
Je n'ai aucune idée exactement où je suis.
Maintenant, quand ma souris passe sur l'un de ces éléments de ma liste de grille,
, je veux pouvoir mettre en évidence un élément pour indiquer que si je clique,
je vais sélectionner cet élément particulier.
Donc, c'est ce que la fonctionnalité que je vais concevoir
en utilisant ma directive de surbrillance que je viens de créer.
Pour ce faire, ouvrons le fichier directive.ts de la mise en évidence.
Donc, vous voyez que nous avons les échafaudages nus disponibles pour la directive
déjà ici et vous verrez que
a déjà importé le directeur à partir du code Angular.
Maintenant, je vais ajouter quelques importations supplémentaires.
Donc, nous allons importer ElementreF et ensuite nous importerons Renderer2 ici.
Now Renderer2 est disponible uniquement avec Angular quatre et au-dessus.
La version antérieure de rendu s'appelait
renderush et elle a été dupliquée maintenant avec Angular quatre.
Renderer2 est maintenant une nouvelle implémentation du rendu
avec un meilleur support pour d'autres fonctionnalités.
Donc, je vais appliquer le Renderer2 pour créer la directive de surbrillance.
Maintenant, pourquoi utilisons-nous ce moteur de rendu ?
Maintenant, lorsque vous créez des directives dans votre application Angular,
à partir de votre application Angular elle-même,
bien qu'au moment où notre application Angular soit rendue principalement dans le navigateur,
vous pouvez utiliser le même code d'échafaudage pour
votre application Angular pour créer une application à d'autres fins.
Dans le cours de saut natif que nous verrons plus tard dans cette spécialisation,
nous verrons une autre utilisation de ce code pour créer des applications utilisant NativeScript.
Donc, dans ce cas, le rendu serait fait d'une manière différente,
pas dans un navigateur.
Donc, nous devons utiliser ce Renderer2,
qui nous permet de s'adapter automatiquement à
la plate-forme appropriée sur laquelle le rendu de cette vue est fait.
Donc, c'est la raison pour laquelle j'utilise le rendu ici.
Aussi, une chose de plus que je veux importer est HostListener.
Le HostListener écoutera les mouvements de la souris depuis l'écran
et répondra de manière appropriée dans ces circonstances.
Nous verrons leur utilisation lorsque nous créerons la directive dans quelques instants.
Alors maintenant, que nous avons importé les choses dont nous avons besoin,
, nous allons injecter quelques choses dans notre constructeur.
Donc, nous allons d'abord utiliser un el,
qui est du type ElementRef et
aussi le second que nous utiliserons est le rendu,
qui est du type Renderer2.
Maintenant avec ceci, ce que nous allons faire est que nous allons utiliser
le HostListener et ensuite ils indiqueraient que pour HostListener,
lorsque l'événement mouseenter se produit,
alors nous appellerons la méthode onmouseenter
et dans la méthode onmouseenter, nous allons faire quelque chose.
De même, je vais créer un autre
appelé HostListener et mouseleave.
Alors quand la souris quitte une région particulière,
alors que vas-tu faire sur mouseleave ?
Nous allons faire une autre opération.
Donc, ce que nous allons faire est quand la souris entre dans une région particulière, dans ce cas,
nous utilisons cette directive d'attribut afin de mettre en évidence
l'élément spécifique de ma liste de grille sur lequel la souris a plané.
Donc, c'est le but de l'implémentation de ces
et lorsque le pointeur de la souris s'éloigne de cet élément,
qui ne sera plus mis en surbrillance.
Donc, c'est le but de cette directive,
la directive de mise en évidence que je crée ici.
Donc, quand la souris entre dans une zone particulière.
Donc, je vais utiliser le rendu et le rendu fournit une méthode appelée addClass.
Donc, cette méthode sera utilisée pour ajouter une classe à l'élément de grille dans ma liste de grille.
Donc, la classe que je vais ajouter,
la façon dont elle est configurée dira this.el.NativeElement et
le deuxième paramètre est
le nom de classe que vous allez appliquer lorsque vous vous aventurez dans cette zone.
Donc, nous appliquerons cette classe de surbrillance à cet élément lorsque
votre souris se déplace dans la région où cet élément est rendu dans la vue.
Maintenant, la même chose. Je vais faire une autre méthode quand la souris part,
Je vais supprimer cette classe.
Donc, la méthode RemoveClass est également supportée par Renderer2.
Donc, dans ce cas,
lorsque la souris se déplace dans cette région,
cette classe de surbrillance sera ajoutée à cet élément de grille.
Lorsque la souris quitte cet élément de grille particulier,
la classe de surbrillance sera supprimée des éléments de la grille.
Donc, voici comment utiliser cette directive attributaire,
j'ajoute et supprime des classes,
classes CSS à mon élément de grille dans ma page GridView.
Maintenant, l'étape suivante est bien sûr de créer cette classe appelée comme classe de surbrillance.
Donc, pour ce faire, je vais aller dans le fichier styles.scss
où nous avons les styles globaux stockés ici.
Donc, dans le fichier styles.scss,
je vais ajouter dans la classe CSS de highlight là-bas.
La classe CSS de surbrillance que je définirai comme background-color.
Je vais appliquer background-pale,
que j'ai déjà défini plus tôt et puis,
j'appliquerais une bordure d'un pixel,
bordure solide de la couleur,
primary-color-dark, que j'ai également défini précédemment
comme une variable CSS et je vais également augmenter l'index z à un.
Ce qui signifie que cet objet sera soulevé sur les autres éléments.
Je suis sûr de votre connaissance de CSS que vous comprenez ce qui est fait.
De plus, je vais faire un peu de transformation sur l'article là-bas,
Je vais juste l'escalader d'une petite quantité,
par l'échelle jusqu'à 1,01.
Donc, petit peu levé et ensuite apparu,
de sorte que le met en évidence sur l'écran.
Donc, c'est la classe CSS que
je vais appliquer en utilisant la directive personnalisée que j'ai créée là-bas.
Maintenant, où vais-je appliquer cette directive personnalisée ?
Nous allons utiliser cette directive personnalisée dans notre fichier de modèle de composants de menu.
Maintenant, avant de faire cela,
revenons à mettre en évidence la directive et
vous remarquerez que dans la directive highlight,
vous avez ce décorateur de directive ici où vous avez une propriété appelée sélecteur,
qui a été définie sur l'application highlight.
Donc, où que vous vouliez utiliser cette directive,
, vous utiliserez un attribut appelé
AppHighlight dans cet élément particulier de votre modèle.
Donc, c'est ainsi que cette directive est créée.
Donc, appliquons cette application de mise en évidence de l'attribut
directive dans notre fichier de modèle de composants de menu.
Donc, en allant dans le fichier de modèle de composants de menu,
Je vais appliquer cette directive de mise en évidence à ce mat-grid-tile ici.
Donc, dans cette tuile de grille,
, j'appliquerai cette directive d'attribut AppHighlight à cet élément particulier ici.
Avec cela, nous avons terminé toutes les mises à jour.
Sauvegardons les modifications puis allons jeter un oeil à notre application après ce changement.
Aller à notre application dans le navigateur.
Maintenant, avec l'application de la directive AppHighlight que nous venons de créer,
vous remarquerez exactement ce qui se passe lorsque nous naviguons sur un élément dans notre vue de menu ici.
Donc, vous remarquez que chaque fois que vous passez le curseur sur un élément de la vue,
la classe CSS de surbrillance est appliquée à chacun d'eux,
où quel élément particulier est mis en surbrillance dans le menu,
de sorte que cela donne une meilleure expérience utilisateur pour l'utilisateur.
Vous pouvez voir que la taille de cet élément est jamais si légèrement
augmenté et présenté dans la vue ici.
Ceci termine l'implémentation de
la directive d'attribut personnalisé que nous avons fait dans cet exercice.
C'est le bon moment pour vous de faire un commit git avec la directive message.