Maison > Article > interface Web > Parlons des directives en Angular
Cet article vous présentera les directives en Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
Environnement :
- CLI angulaire : 11.0.6
- Angulaire : 11.0.7
- Nœud : 12.18.3
- npm : 6.14.6
- IDE : Visual Studio Code
Directive était très populaire à l'époque d'Angular 1.0 (appelé AngularJS à l'époque), mais est moins utilisé maintenant. On peut simplement comprendre que les instructions (Directives) sont utilisées pour étendre des éléments (DOM) existants. [Tutoriels associés recommandés : "tutoriel angulaire"]
Si vous cherchez dans le code source angulaire, vous pouvez voir la définition suivante
/** * Supplies configuration metadata for an Angular component. * * @publicApi */ export declare interface Component extends Directive {
Oui, le composant est dérivé de la directive, c'est-à-dire que le composant appartient à la directive.
2.1. Types d'instructions
Le composant est une sous-interface de Directive et une instruction spéciale. peut avoir des modèles HTML, mais Directive ne peut pas avoir de modèles.
Directives de type attribut : utilisées pour modifier l'apparence et le comportement des éléments DOM, mais ne modifieront pas la structure du DOM. Les directives de type attribut typiques dans les instructions intégrées d'Angular incluent ngClass et. ngStyle. Si vous envisagez d'encapsuler votre propre bibliothèque de composants, des instructions de type attribut sont nécessaires.
Directives structurelles : vous pouvez modifier la structure du DOM. Les directives structurelles communes intégrées incluent *ngFor
, *ngIf
et *ngSwitch
. Étant donné que les directives structurelles modifient la structure du DOM, plusieurs directives structurelles ne peuvent pas être utilisées simultanément sur la même balise HTML. Si vous souhaitez utiliser plusieurs directives structurelles sur le même élément HTML, vous pouvez envisager d'ajouter un calque vide d'éléments pour les imbriquer, comme un calque vide à l'extérieur (p
).
Les directives sont utilisées dans Angularr pour améliorer les fonctionnalités du DOM, y compris le HTML natif. DOM et notre propre composant personnalisé. Par exemple, vous pouvez étendre un bouton pour éviter les clics secondaires avant que le serveur ne réponde après avoir cliqué sur certains contenus de revenus, etc.
4.1. La fonction Commande
implémente une commande Lorsque la souris la survole, le fond s'affiche en jaune. Lorsque la souris s'éloigne, elle revient à la normale.
4.2. Anuglar CLI génère des fichiers de base
ng generate directive MyHighlight
Anuglar CLI génère automatiquement des fichiers HTML, CSS, ut et autres.
4.3. Code de base de l'instruction directive
import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } @HostListener('mouseenter') onMouseEnter() { this.highlight('yellow'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
4.4. >
<p my-highlight>Highlight me!</p>
est notre attribut étendu d'élément (instruction, directive).
my-highlight
, *ngFor
et *ngIf
dans Angular sont toutes des directives intégrées dans Angular. *ngSwitch
Vidéo de programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!