Explication détaillée de la façon de créer des instructions personnalisées dans Angular

Cet article vous présentera comment créer des instructions personnalisées dans 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.

Introduction aux instructions

Il existe trois types d'instructions dans Angular :

• Les composants ont des instructions de modèle. Les composants héritent des instructions et étendent simplement la classe et les attributs liés à l'interface utilisateur.

• Directives basées sur les attributs, directives qui modifient le comportement et l'apparence des éléments, composants ou autres directives DOM. Par exemple, NgStyle, NgClass.

• Directive structurelle, une directive qui modifie la disposition du DOM en ajoutant ou en supprimant des éléments du DOM. Par exemple, NgIf, NgFor.

Cependant, dans le développement réel, en fonction des besoins de l'entreprise, nous étendons souvent les instructions des composants angulaires pour faciliter le développement commercial. Voyons comment créer votre propre directive. [Recommandations associées : "Tutoriel angulaire"]

Création de directives de type attribut

Dans Angular, type d'attribut directives La création nécessite au moins une classe de contrôleur avec un décorateur @Directive. Ce décorateur spécifie un nom de sélecteur qui identifie le nom d'attribut associé à la directive. La classe contrôleur implémente le comportement fonctionnel de la directive.

Ensuite, nous créons une commande simple pour changer la couleur d'arrière-plan lorsque la souris survole l'élément ; lorsque la souris s'éloigne, la couleur d'arrière-plan disparaît lorsque l'on clique sur la souris, la taille de la police devient plus grande ; la souris est relâchée, la police retrouve sa fonctionnalité d'origine.

Implémentation de la directive

Créez le fichier background-exed.directive.ts et implémentez le code suivant :

import { Directive, HostListener, ElementRef, Renderer2, HostBinding } from '@angular/core';

@Directive({
  selector: '[appBackgroundExe]'
})
export class BackgroundExeDirective {

  @Input('appBackgroundExe')
  highLightColor: string;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    // 这种写法比较丑陋
    // this.elementRef.nativeElement.style.background = 'yellow';
    // 推荐这种写法， Renderer
    this.renderer.setStyle(this.elementRef.nativeElement, 'background', 'yellow');
  }

  @HostBinding('class.pressed')
  isPressed: boolean;

  @HostListener('mouseenter')
  onMouseEnter(): void {
   this.highLight(this.highLightColor);
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.highLight(null);
  }

  @HostListener('mousedown')
  onMouseDown(): void {
    this.isPressed = true;
  }

  @HostListener('mouseup')
  onMouseUp(): void {
    this.isPressed = false;
  }

  private highLight(color: string): void {
    // this.elementRef.nativeElement.style.background = color;
    this.renderer.setStyle(this.elementRef.nativeElement, 'background', color);
  }

}

Où, selector: '[appBackgroundExe]' est le nom de l'attribut associé à la directive afin qu'Angular puisse Au moment de la compilation, le code HTML associé à cette directive se trouve dans le modèle. Dans le constructeur

, les instances des modules ElementRef et Renderer2 sont injectées. Grâce à ElementRef, nous pouvons référencer l'élément DOM identifié par la directive et effectuer les opérations associées sur celui-ci et nous pouvons utiliser l'API fournie par Renderer2 pour effectuer les opérations de rendu associées sur l'élément.

@HostListener et @HostBinding sont des décorateurs immobiliers. @HostListener est utilisé pour ajouter une surveillance des événements à l'élément hôte ; l'élément marqué avec l'instruction est l'élément hôte. @HostBinding est utilisé pour définir dynamiquement la valeur d'attribut de l'élément hôte.

Définir le style de police

• appliation.component.less

.pressed {
  font-size: 30px;
}

Utiliser les directives dans les modèles

• application.component.html

<div class="panel panel-primary">
  <div [appBackgroundExe]="&#39;red&#39;">鼠标移进，元素变成红色。鼠标移出，元素红色消失</div>
</div>

Créer des directives structurelles

directives structurelles La création est similaire à création d'instructions basées sur des attributs. L'instruction

implémente

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[appIf]'
})
export class IfDirective {

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainerRef: ViewContainerRef
    ) { }

    @Input(&#39;ifCreat&#39;) 
    set condition(condition: boolean) {
       if (condition) {
         this.viewContainerRef.createEmbeddedView(this.templateRef);
       } else {
         this.viewContainerRef.clear();
       }
    }
}

où, TemplateRef représente l'élément de modèle de modèle intégré à travers lequel des vues en ligne peuvent être créées. ViewContainerRef représente un conteneur de vues qui peut ajouter une ou plusieurs vues, à travers lequel des vues en ligne ou des vues de composants basées sur des instances TemplateRef peuvent être créées et gérées.

Utilisation de directives dans les modèles

• application.component.html

<div class="panel panel-primary">
  <div *ifCreate="&#39;true&#39;">hello</div>
</div>

Résumé

Cet article présente principalement comment créer des instructions personnalisées dans Angular. Dans le développement réel, nous pouvons créer de manière flexible les instructions souhaitées.

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la 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!