NgFor
et NgIf
.
NgStyle
peut modifier plusieurs styles d'élément en même temps@Directive
, qui spécifie le sélecteur qui identifie l'attribut.
La classe de contrôleur implémente le comportement de directive souhaité.appHighlight
simple pour définir la couleur d'arrière-plan d'un élément lorsque l'utilisateur la survole.
Vous pouvez l'appliquer comme ceci :ng generate directive
.src/app/highlight.directive.ts
et un fichier de test correspondant (.../spec.ts) et déclare la classe de directive à la racine AppModule
.
Les directives doivent être déclarées dans les modules Angular de la même manière que les composants .src/app/highlight.directive.ts
@Directive
.[]
) qui en font un sélecteur d'attribut.
Angular localise chaque élément du modèle ayant un attribut nommé appHighlight
et applique la logique de cette directive à cet élément.
Le modèle de sélecteur d'attribut explique le nom de ce type de directive.highlight
de la directive avec ng
car ce préfixe est réservé à Angular et son utilisation pourrait
provoquer des bugs difficiles à diagnostiquer.@Directive
, la classe de contrôleur de la directive, appelée HighlightDirective
,
contient la logique (actuellement vide) de la directive. L'exportation de HighlightDirective
rend la directive accessible.src/app/highlight.directive.ts
import
spécifie un symbole ElementRef
supplémentaire à partir de la bibliothèque core Angular.
Vous utilisez le constructeur ElementRef
de la directive pour injecter une référence à l'élément DOM hôte,
l'élément auquel vous avez appliqué appHighlight
. ElementRef
accorde un accès direct à l'élément
DOM hôte via sa propriété native Element
.
Cette première implémentation définit la couleur d'arrière-plan de l'élément hôte en jaune.Highlight
, ajoutez un élément ‹p›
au modèle de la racine AppComponent
et appliquez la directive en tant qu'attribut.
appHighlight
sur l'élément hôte ‹p›
.
Il a créé une instance de la classe HighlightDirective
et injecté une référence à l'élément ‹p›
dans le constructeur de la directive,
qui définit le style d'arrière-plan de l'élément ‹p›
en jaune.
appHighlight
définit simplement une couleur d'élément.
La directive pourrait être plus dynamique.
Il pourrait détecter le focus de la souris dans ou hors de l'élément et répondre en définissant ou en effaçant la couleur de surbrillance.HostListener
à la liste des symboles importés.HostListener
.
@HostListener
vous permet de vous abonner aux événements de l'élément DOM qui héberge une directive d'attribut, dans ce cas ‹p›
.
Bien entendu, vous pouvez accéder au DOM avec JavaScript standard et attacher manuellement les écouteurs d'événements.
Il y a au moins trois problèmes avec cette approche :el
.
La méthode highlight
a été extraite du constructeur.
Le constructeur révisé déclare simplement l'injecté el
: ElementRef
.Input
à la liste des symboles importés de @angular/core
.highlightColor
à la classe de directive comme ceci :@Input
.
Il ajoute des métadonnées à la classe qui rend la propriété de la directive highlightColor
disponible pour la liaison.
C'est ce qu'on appelle une propriété d'entrée parce que les données découlent de l'expression de liaison dans la directive.
Sans ces métadonnées d'entrée, Angular refuse la liaison.AppComponent
:color
à la AppComponent
.[appHighlight]
applique la directive de mise en surbrillance à l'élément ‹p›
et définit la couleur de surbrillance de la directive
avec une liaison de propriété. Vous réutilisez le sélecteur d'attribut de la directive [appHighlight]
pour effectuer les deux tâches.
C'est une syntaxe nette et compacte.highlightColor
de la directive appHighlight
car c'est le nom de liaison de la propriété de couleur.@Input
.
highlightColor
.
En dehors de la directive, où vous la liez, on l'appelle appHighlight
.highlightColor
, modifiez la méthode onMouseEnter()
pour utiliser cette propriété.AppComponent
en un harnais qui vous permet de choisir la couleur de surbrillance avec un bouton
radio et de lier votre choix de couleur à la directive.app.component.html
à jour comme suit :AppComponent.color
afin qu'il n'ait pas de valeur initiale.HighlightDirective
appelée defaultColor
:onMouseEnter
afin qu'elle tente d'abord de mettre en surbrillance avec highlightColor
, puis avec defaultColor
,
et retombe à "rouge" si les deux propriétés ne sont pas définies.appHighlight
d'attribut ?AppComponent.color
et retomber à "violet" en tant que couleur par défaut.defaultColor
appartient à la Directive Highlight
parce que vous l'avez rendue publique avec le décorateur @Input
.
Voici comment le harnais devrait fonctionner lorsque vous avez fini de coder.