本篇文章為大家介紹一下在 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 是用來動態設定宿主元素的屬性值。
設定字體樣式
.pressed {
font-size: 30px;
}在範本中使用指令
<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 實例的內嵌視圖或元件視圖。
在範本中使用指令
<div class="panel panel-primary"> <div *ifCreate="'true'">hello</div> </div>
程式設計教學！ ！
以上是詳解Angular中自訂創建指令的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
