如何在 Angular 中建立自訂指令

Angular 的主要功能之一是指令。 Angular 指令是一種將行為加入 DOM 元素的方法。 Angular 提供了各種內建指令，您也可以在這個強大的框架中建立自訂指令。

什麼是指令?

Angular 中的指令是專門的程式碼構造，旨在透過各種方式影響 HTML 元素的表示和互動性，例如修改文件物件模型 (DOM)、新增事件處理程序或控制可見性。這些指令允許開發人員透過在模板語法本身內指定所需的變更來有效地操作使用者介面。

Angular 中的結構指令修改文件物件模型 (DOM) 的佈局，而屬性指令則影響範本內各個元素的視覺效果或功能。這些指令允許開發人員輕鬆自訂和操作 HTML 標記，從而提供了增強 Angular 應用程式功能的強大方法。

指令的好處

在 Angular 中使用指令具有多種優勢，包括增強的靈活性和對元件行為的控制，以及改進的模組化和程式碼組織。透過利用指令，開發人員可以為超出基本 HTML 屬性或生命週期掛鉤的元件建立自訂行為，從而實現對 UI 互動的更強的表現力和更細粒度的控制。此外，指令可以更好地封裝和分離應用程式中的關注點，從而提高專案不同部分的可重複使用性和可維護性。總的來說，指令在塑造 Angular 應用程式的結構和功能方面發揮著至關重要的作用，為開發人員提供了強大的工具來有效地建立複雜的 UI 和使用者體驗。

可重複使用性是指令的關鍵功能，它允許跨多個元件使用它們，從而透過減少冗餘並促進整個專案的一致性來提高效率。

指令可擴展性允許在元件中添加新功能，從而增強其功能並提高整體效能。

指令提供的多功能性允許對元素的屬性和操作進行操作和定制，為開發人員提供充足的創作自由來有效地建立他們的應用程式。

設定你的 Angular 應用程式

若要建立 Angular 項目，請在終端機中執行下列命令來安裝 Angular 命令列介面 (CLI):

 npm install -g @angular/cli

安裝 Angular 命令列介面 (CLI) 後，可以使用以下命令建立 Angular 專案:

 ng new custom-directives-app

執行上述指令將產生一個名為「custom-directives-app」的 Angular 應用程式。

建立自訂指令

為了在 Angular 專案中建立自訂指令，必須先建立一個 TypeScript 檔案並指定一個用指令裝飾器裝飾的類別。

@Directive 裝飾器是 TypeScript 的一項功能，允許建立自訂指令。為了實現此功能，我們將在src/app目錄中建立一個highlight.directive.ts檔案。在此文件中，我們將建立名為「highlight」的自訂指令。

例如:

 import { Directive } from "@angular/core";

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

導入的指令源自 Angular 核心模組，並使用“@Directive”裝飾器進行裝飾，該裝飾器接受由帶有“selector”屬性的物件導向表示組成的參數。

在這種情況下，將選擇器屬性設為「[myHighlight]」可以透過將「myHighlight」屬性附加到指定元素來將此指令套用到其範本。

將指令合併到模板結構中可以透過以下方式實現:

 <main>
 <p myHighlight>Some text</p>
</main>

將行為加入指令中

為了使用指令操作文件物件模型（DOM），必須先建立所述指令並從「@angular/core」套件中取得「ElementRef」的實例。此引用用作將行為附加到模板內的元素的方法。

為了在指令中使用 ElementRef，必須將其合併到該指令的建構子中。 ElementRef 充當位於特定視點內的本機元素的封裝。

當然，下面的插圖演示了在 Angular 中將行為附加到指令的過程:

 import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}

HighlightDirective 類別的建構子接受 ElementRef 參數，該參數由 Angular 自動提供。此 ElementRef 授予對對應 DOM 元素的存取權限。

利用 this.element.nativeElement 屬性，可以存取由 element 參數所表示的原始 DOM 元素。隨後，透過使用style屬性，可以指定淺藍色色調作為相關組件的背景顏色。因此，應用了「myHighlight」指令的任何元素都會呈現天藍色背景。

為了使該指令可操作，您必須在 app.module.ts 檔案中匯入並明確聲明它的存在。

例如:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

現在您可以在 Angular 元件中的組成元素上使用 myHighlight 指令。

 <main>
 <p myHighlight>Some text</p>
</main>

為了評估應用程式中特定指令的功能，建議您使用命令列介面在指定的開發伺服器上部署和執行應用程式。若要啟動此過程，請導航至終端機所在的對應目錄並輸入指定的命令來執行。這將使您能夠驗證該指令是否按預期運行。

 ng serve

執行給定的指令後，請將您的互聯網瀏覽器定向到“http://localhost:4200/”，以訪問與所描述的用戶介面驚人相似的使用者介面。下面的視覺表示。

Angular 的本機指令允許透過接受特定值來修改元素的外觀，但是，此功能未擴展到諸如「myHighlight」之類的自訂指令。為了修正此限制，可以在自訂指令中實作一個配置選項，該選項允許根據提供的值動態修改範本的背景顏色。

要修改 Angular 中「highlight」指令的行為，可以用提供的範本取代「highlight.directive.ts」檔案的內容。這將導致與指令的選擇器相符的 HTML 元素的呈現不同。

 import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})

export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) {
     }
}

提供的程式碼演示了 Angular 中 HighlightDirective 類別的實現，該類別擁有一個標識為“myHighlight”的 setter 方法。所述方法接受資料類型字串的單一輸入參數，並用輸入裝飾器裝飾，使其能夠從監督組件接收所述顏色值。

現在可以透過為元素提供一個值來使用「myHighlight」屬性指定元素所需的背景顏色。

例如:

 <main>
 <p myHighlight='pink'>Some text</p>
</main>

建立自訂結構指令

在前面的段落中，我們指導了您在範本中建立、注入操作和實現個人化屬性指令的過程。屬性指令改變 DOM 元件的視覺呈現，而結構指令透過新增、刪除或重新定位元素來修改 DOM 中元素的組成。

Angular 提供了兩個基本的結構指令，即「ngFor」和「ngIf」。前者迭代項目數組並為每個元素顯示相應的模板，而後者負責根據特定標準有條件地渲染元素。

在這一部分中，我們將開發一個客製化的結構指令，它具有與「ngIf」指令類似的功能。為了實現這一點，我們將建立一個 condition.directive.ts 檔案。

在condition.directive.ts檔案中，編寫以下程式碼:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

@Directive({
    selector: "[condition]"
})

export class ConditionDirective {

    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(
 private template: TemplateRef<unknown>,

private viewContainer: ViewContainerRef

) {}
}

目前的程式碼片段能夠透過應用指向元素的「條件」來有條件地顯示組件，並伴隨著來自包圍組件的布林值的傳輸。

一個 TemplateRef 和一個 ViewContainerRef 。前者用作與指令關聯的模板的引用，而後者表示將在其中渲染指令視圖的視圖渲染上下文。

ConditionDirective 使用透過 if-else 語句實現的條件表達式來評估它收到的參數的優點。如果所述輸入被證明是有效的，則該構造將在「ViewContainerRef」固有的「createEmbeddedView()」方法的幫助下，利用指定的設計模板產生封閉的透視圖。隨後，與該容器實例關聯的 renderView() 函數將協調新建立的視點在瀏覽器的文檔物件模型 (DOM) 中的合併。

如果不符合指定的條件，則該指令將使用 ViewContainerRef 的clear()方法從文件中刪除視圖容器內所有先前的渲染。

合併該指令需要匯入並確認其存在於應用程式的模組檔案中。一旦完成，它就可以在模板構造中使用。

可以透過合併提供的程式碼片段來將擴充合併到模板中，如下所示:

 <main>
 <p *condition="true">Hello There!!!</p>
</main>

現在您可以建立自訂指令

Angular 的自訂指令提供了一種影響文件物件模型 (DOM) 並在範本結構中註入動態功能的授權方法。熟悉了自訂屬性和結構指令的創建和應用後，現在您可以充分利用 Angular 的潛力。