詳解Angular中自訂創建指令的方法

本篇文章為大家介紹一下在 Angular 中如何自訂建立指令。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

指令介紹

#在Angular 中有三種類型的指令：

• 元件，有範本的指令，元件是繼承於指令的，只是擴充類別與UI 相關的屬性。

• 屬性型指令，改變 DOM 元素、元件或其他指令的行為和外觀的指令。如，NgStyle、NgClass。

• 結構型指令，透過新增或移除 DOM 元素改變 DOM 佈局的指令。如，NgIf、NgFor。

然而，在實際的開發中，根據業務的需要，我們經常會拓展 Angular 元件的指令來方便業務的開發。下面讓我們來看看如何建立自己的指令。 【相關推薦：《angular教學》】

建立屬性型指令

在Angular 中，屬性型指令的建立至少需要一個帶有@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 實例的內嵌視圖或元件視圖。

在範本中使用指令

application.component.html

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

小結

本文主要介紹了在Angular 中如何自訂建立指令。在實際的開發中，我們可以很靈活地建立我們想要的指令。

更多程式相關知識，請造訪：

程式設計教學！ ！

以上是詳解Angular中自訂創建指令的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！