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

Résumé1.

---

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"]

2. La relation entre les composants et les instructions

---

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).

3. Le but des directives dans Angular

---

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. Exemples de commandes

---

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

5. Résumé

---

• La directive est utilisée pour étendre les fonctionnalités des éléments ou des composants DOM.

• , *ngFor et *ngIf dans Angular sont toutes des directives intégrées dans Angular. *ngSwitch

Pour plus de connaissances liées à la programmation, veuillez visiter :

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!