Angular中如何自定義創建指令

小編給大家分享一下Angular中如何自定義創建指令，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

指令介紹

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

• 組件，有模板的指令，組件是繼承于指令的，只是擴展類與 UI 相關的屬性。

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

• 結構型指令，通過添加或移除 DOM 元素改變 DOM 布局的指令。如，NgIf、NgFor。

然而，在實際的開發中，根據業務的需要，我們經常會拓展 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]="'red'">鼠標移進，元素變成紅色。鼠標移出，元素紅色消失</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('ifCreat') 
    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="'true'">hello</div>
</div>

以上是“Angular中如何自定義創建指令”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！