Angular中如何自定義創(chuàng)建指令

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

指令介紹

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

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

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

• 結(jié)構(gòu)型指令，通過添加或移除 DOM 元素改變 DOM 布局的指令。如，NgIf、NgFor。

然而，在實際的開發(fā)中，根據(jù)業(yè)務(wù)的需要，我們經(jīng)常會拓展 Angular 組件的指令來方便業(yè)務(wù)的開發(fā)。下面讓我們來看看如何創(chuàng)建自己的指令。

創(chuàng)建屬性型指令

在 Angular 中，屬性型指令的創(chuàng)建至少需要一個帶有 @Directive 裝飾器的控制器類。這個裝飾器指定了一個選擇器名稱，用于標識與指令相關(guān)聯(lián)的屬性名稱?？刂破黝悓崿F(xiàn)了指令的功能行為。

接下來，我們創(chuàng)建一個簡單的指令，實現(xiàn)鼠標在元素上懸停時，改變起背景顏色；鼠標移開時，背景顏色消失；鼠標點擊時，字體變大；鼠標松開時，字體恢復(fù)原樣的功能。

指令實現(xiàn)

創(chuàng)建 background-exed.directive.ts 文件，實現(xiàn)如下代碼：

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]' 是指令關(guān)聯(lián)的屬性名稱，以便 Angular 在編譯時，能從模板中找到與此指令關(guān)聯(lián)的 HTML 代碼。

構(gòu)造函數(shù)中，注入了 ElementRef 和 Renderer2 模塊的實例。通過 ElementRef 我們可以引用指令標識的 DOM 元素，并對其進行相關(guān)的操作；并且可以利用 Renderer2 提供的 API 對元素進行相關(guān)的渲染操作。

@HostListener 和 @HostBinding 是屬性裝飾器。@HostListener 是用來為宿主元素添加事件監(jiān)聽；而指令標記的元素，就是宿主元素。@HostBinding 是用來動態(tài)設(shè)置宿主元素的屬性值。

設(shè)置字體樣式

• appliation.component.less

.pressed {
  font-size: 30px;
}

在模板中使用指令

• application.component.html

<div class="panel panel-primary">
  <div [appBackgroundExe]="'red'">鼠標移進，元素變成紅色。鼠標移出，元素紅色消失</div>
</div>

創(chuàng)建結(jié)構(gòu)型指令

結(jié)構(gòu)型指令的創(chuàng)建與屬性型指令創(chuàng)建大同小異。

指令實現(xiàn)

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 表示內(nèi)嵌的 template 模板元素，通過它可以創(chuàng)建內(nèi)嵌視圖。ViewContainerRef 表示一個視圖容器，可以添加一個或多個視圖，通過它可以創(chuàng)建和管理基于 TemplateRef 實例的內(nèi)嵌視圖或組件視圖。

在模板中使用指令

• application.component.html

<div class="panel panel-primary">
  <div *ifCreate="'true'">hello</div>
</div>

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