Ausführliche Erklärung zum Erstellen benutzerdefinierter Anweisungen in Angular

In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Anweisungen in Angular erstellen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Einführung in Direktiven

Es gibt drei Arten von Direktiven in Angular:

• Komponenten, Direktiven mit Vorlagen, Komponenten erben von Direktiven und erweitern lediglich die UI-bezogenen Eigenschaften der Klasse.

• Attributbasierte Direktiven, Direktiven, die das Verhalten und Erscheinungsbild von DOM-Elementen, Komponenten oder anderen Direktiven ändern. Zum Beispiel NgStyle, NgClass.

• strukturelle Direktive, die das DOM-Layout durch Hinzufügen oder Entfernen von DOM-Elementen ändert. Zum Beispiel NgIf, NgFor.

In der tatsächlichen Entwicklung erweitern wir jedoch je nach Geschäftsanforderungen häufig die Anweisungen für Angular-Komponenten, um die Geschäftsentwicklung zu erleichtern. Sehen wir uns an, wie Sie Ihre eigenen Anweisungen erstellen. [Verwandte Empfehlungen: „Angular Tutorial“]

Attributbasierte Anweisungen erstellen

In Angular erfordert die Erstellung von attributbasierten Anweisungen mindestens ein Steuerelement mit einem @Directive decorator Geräteklasse. Dieser Dekorator gibt einen Selektornamen an, der den mit der Direktive verknüpften Attributnamen identifiziert. Die Controller-Klasse implementiert das funktionale Verhalten der Direktive. @Directive 装饰器的控制器类。这个装饰器指定了一个选择器名称，用于标识与指令相关联的属性名称。控制器类实现了指令的功能行为。

接下来，我们创建一个简单的指令，实现鼠标在元素上悬停时，改变起背景颜色；鼠标移开时，背景颜色消失；鼠标点击时，字体变大；鼠标松开时，字体恢复原样的功能。

指令实现

创建 background-exed.directive.ts 文件，实现如下代码：

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);
  }

}

其中，selector: '[appBackgroundExe]' 是指令关联的属性名称，以便 Angular 在编译时，能从模板中找到与此指令关联的 HTML 代码。

构造函数中，注入了 ElementRef 和 Renderer2 模块的实例。通过 ElementRef 我们可以引用指令标识的 DOM 元素，并对其进行相关的操作；并且可以利用 Renderer2 提供的 API 对元素进行相关的渲染操作。

@HostListener 和 @HostBinding 是属性装饰器。@HostListener 是用来为宿主元素添加事件监听；而指令标记的元素，就是宿主元素。@HostBinding 是用来动态设置宿主元素的属性值。

设置字体样式

• appliation.component.less

.pressed {
  font-size: 30px;
}

在模板中使用指令

• application.component.html

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

创建结构型指令

结构型指令的创建与属性型指令创建大同小异。

指令实现

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();
       }
    }
}

其中，TemplateRef 表示内嵌的 template 模板元素，通过它可以创建内嵌视图。ViewContainerRef 表示一个视图容器，可以添加一个或多个视图，通过它可以创建和管理基于 TemplateRef

Direktivenimplementierung

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

Nach dem Login kopieren
• Unter diesen ist selector: '[appBackgroundExe]' der Attributname, der der Direktive zugeordnet ist Damit Angular kompilieren kann, befindet sich der zu dieser Direktive gehörende HTML-Code in der Vorlage.
Im Konstruktor werden Instanzen der Module ElementRef und Renderer2 eingefügt. Über ElementRef können wir auf das durch die Anweisung identifizierte DOM-Element verweisen und entsprechende Vorgänge daran ausführen, und wir können die von Renderer2 bereitgestellte API verwenden, um entsprechende Rendervorgänge für das Element durchzuführen .

@HostListener und @HostBinding sind Eigenschaftsdekoratoren. @HostListener wird verwendet, um das Host-Element zu überwachen, und das mit der Anweisung markierte Element ist das Host-Element. @HostBinding wird verwendet, um den Attributwert des Hostelements dynamisch festzulegen. Schriftstil festlegen

appliation.component.lessrrreee

🎜Direktiven in Vorlagen verwenden🎜🎜🎜🎜application.component.html🎜🎜rrreee🎜🎜🎜Strukturelle Direktive erstellen s🎜 🎜🎜🎜Strukturtyp Die Schöpfung Die Erstellung von Anweisungen ähnelt der Erstellung von Anweisungen vom Typ Attribut. 🎜🎜🎜Anweisungsimplementierung🎜🎜rrreee🎜Dabei stellt TemplateRef das eingebettete Vorlagenelement dar, über das eingebettete Ansichten erstellt werden können. ViewContainerRef stellt einen Ansichtscontainer dar, dem eine oder mehrere Ansichten hinzugefügt werden können, über die Inline-Ansichten oder Komponentenansichten basierend auf TemplateRef-Instanzen erstellt und verwaltet werden können. 🎜🎜🎜Direktiven in Vorlagen verwenden🎜🎜🎜🎜application.component.html🎜🎜rrreee🎜🎜🎜Zusammenfassung🎜🎜🎜🎜In diesem Artikel wird hauptsächlich die Erstellung benutzerdefinierter Direktiven in Angular vorgestellt. In der tatsächlichen Entwicklung können wir flexibel die gewünschten Anweisungen erstellen. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierlehre🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Erstellen benutzerdefinierter Anweisungen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!