使用和創建角指令的實用指南 - 站點點

>本文側重於角度指令 - 它們是什麼，如何使用它們並構建我們自己的。

>指令可能是角度應用中最重要的一點，如果考慮到它，最使用的角度單位，組件實際上是指令。

>一個角部分不僅僅是帶有模板的指令。當我們說組件是角度應用的構件時，我們實際上是在說指令是角度應用的構件。

鑰匙要點

Angular指令可以是預先定義的，例如NG重複或定制。創建自定義指令涉及從 @angular/core導入指令，定義指令類，並將其添加到NGMODULE中的聲明中。

>重要的是為手頭的任務選擇正確的指令類型。如果在不可見DOM時仍將有用，則應使用屬性指令。如果元素無用，則應使用結構指令將其刪除。但是，應注意避免使DOM過於復雜或負面影響。

• >基本概述
在核心處，指令是一個函數，每當角編譯器在DOM中找到它時都會執行。 Angular指令用於通過給出新的語法來擴展HTML的功率。每個指令都有一個名稱 - 一個來自角度定義的ng重複，或一個可以稱為任何東西的自定義的指令。每個指令確定可以使用的位置：在元素，屬性，類或評論中。 默認情況下，從角版本2及以後，Angular指令分為三種不同類型：
• 組件
正如我們之前看到的，組件只是帶有模板的指令。在引擎蓋下，他們使用指令API，並給我們一種更清潔的方式來定義它們。
• 其他兩種指令類型沒有模板。相反，它們是專門針對DOM操縱的。
>
• 屬性指令

屬性指令通過改變其行為和外觀來操縱DOM。

我們使用屬性指令將條件樣式應用於元素，顯示或隱藏元素或根據不斷變化的屬性動態更改組件的行為。

結構指令

這些是專門針對創建和破壞DOM元素的專門量身定制的。

某些屬性指令（例如隱藏的指令）顯示或隱藏元素 - 基本上可以保持DOM。但是，結構性角指令不太友好，因為它們添加或完全刪除了DOM的元素。因此，當使用這些時，我們必須格外小心，因為我們實際上正在更改HTML結構。

使用現有的Angular指令

>

使用Angular中的現有指令非常容易，如果您過去寫了一個Angular應用程序，我敢肯定您已經使用過它們。 NGCLASS指令是現有角度屬性指令的一個很好的例子：

>因此，通過在下面的示例上使用NGCLASS指令，我們實際上將藍色類添加到我們的段落中，並且明確不添加黃色。由於我們正在改變類的外觀，而不是更改實際的HTML結構，因此這顯然是屬性指令。但是Angular還提供了開箱即用的結構指令，例如NGIF：>

在此示例中，我們使用NGIF指令使用按鈕添加或刪除文本。在這種情況下，HTML結構本身會受到影響，因此顯然是一個結構性指令。

有關可用角指令的完整列表，我們可以檢查官方文檔。 正如我們所看到的，使用角指令非常簡單。角指令的真正力量具有創建我們自己的能力。 Angular提供了一個乾淨而簡單的API來創建自定義指令，這就是我們在以下各節中所關注的。

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

創建屬性指令

創建指令類似於創建組件。但是在這種情況下，我們使用@Directive Decorator。就我們的示例而言，我們將創建一個稱為“ my-reror指導性”的指令，該指令將以紅色的元素背景突出顯示，以指示錯誤。

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

>

>在我們的示例中，我們將使用Angular 2 QuickStart軟件包。我們只需要克隆存儲庫，然後運行NPM安裝和NPM啟動。它將為我們提供一個可以用來實驗的樣板應用程序。我們將在該樣板的頂部構建示例。

>讓我們從SRC/App文件夾上創建一個名為app.myerrordiratection.ts的文件開始，然後將以下代碼添加到它：>

>從 @angular/core導入指令後，我們可以使用它。首先，我們需要一個選擇器，該選擇器為指令命名。在這種情況下，我們稱其為my-error。

>

最佳實踐表明，在命名角指令時，我們始終使用前綴。這樣，我們一定要避免與任何標準HTML屬性發生衝突。我們也不應該使用NG前綴。 Angular使用的是，我們不想將我們自定義的Angular指令與Angular預定義的指令混淆。在此示例中，我們的前綴是我的 - 。 然後，我們創建了一個類，肌傾向。要訪問DOM的任何元素，我們需要使用ElementRef。由於它也屬於 @angular/core軟件包，因此與指令一起導入並使用它是一個簡單的問題。

> 然後，我們添加了代碼以實際突出我們類的構造函數。 >

為了能夠使用此新創建的指令，我們需要將其添加到app.module.ts文件上的聲明中：

>

最後，我們想利用剛創建的指令。為此，讓我們瀏覽到app.component.ts文件並添加以下內容：

最終結果看起來與以下方式相似：

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

創建結構性指令

在上一節中，我們看到瞭如何使用Angular創建屬性指令。創建結構行為的方法是完全相同的。我們創建一個帶有指令代碼的新文件，然後將其添加到聲明中，最後，我們將其在組件中使用。

對於我們的結構指令，我們將實施NGIF指令的副本。這樣，我們不僅將實施指令，而且還要查看角指令如何處理幕後的事情。

>讓我們從我們的app.mycustomifdiractive.ts文件開始 如我們所見，我們正在為此使用幾個不同的導入，主要是：輸入，Templateref和ViewContainerRef。輸入裝飾器用於將數據傳遞給組件。 Templateref一個用於實例化嵌入式視圖。嵌入式視圖代表要渲染的佈局的一部分，並鏈接到模板。最後，ViewContainerRef是一個可以連接一個或多個視圖的容器。這些組件一起工作如下：

通過注入ViewContainerRef，指令訪問視圖容器。通過調用ViewContainerRef的CreateMbedDedView方法並傳遞模板，創建並將嵌入式視圖連接到視圖容器。我們想使用該指令附加到的模板，因此我們通過注入的Templateref傳遞。

- 來自rangle.io的Angular 2訓練

接下來，我們將其添加到我們的聲明器中：

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

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

我們在組件中使用它：

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

結構指令提供的方法類型可能非常有用，例如，當我們必鬚根據其權限為不同用戶展示不同信息時。例如，站點管理員應該能夠查看和編輯所有內容，而常規用戶則不得。如果我們使用屬性指令將私人信息加載到DOM中，則常規用戶和所有此事的用戶都可以訪問它。

>

>角指令：屬性與結構

我們研究了屬性和結構指令。但是我們什麼時候應該使用一個或另一個？

答案可能會令人困惑，我們最終可能會因為解決問題而最終使用錯誤的答案。但是有一個簡單的規則可以幫助我們選擇合適的規則。基本上，如果具有指令的元素在不可見的DOM時仍將在DOM中有用，那麼我們絕對應該保留它。在這種情況下，我們使用隱藏的屬性指令。但是，如果該元素沒有用，那麼我們應該將其刪除。但是，我們必須小心避免一些常見的陷阱。我們必須避免始終隱藏元素的陷阱，因為它更容易。這將使DOM更加複雜，並可能對整體性能產生影響。還應避免總是刪除和重新創建元素的陷阱。絕對是更乾淨的，但以犧牲性能為代價。

> 總共，應仔細分析每種情況，因為理想的解決方案始終是對您的應用結構，行為和性能的總體影響最小的解決方案。該解決方案可能是屬性指令，結構指令，或者在最常見的情況下，這兩個方案之間都會妥協。

結論

在本文中，我們查看了角指令，這是角度應用的核心。我們查看了不同類型的指令，並看到瞭如何創建適合我們需求的自定義指令。

我希望本文能夠通過Angular指令來啟動並運行。如果您有任何疑問，請隨時使用下面的評論部分。

經常詢問有關角指令的問題（常見問題解答）

角指令的不同類型是什麼？顧名思義，組件指令是帶有模板的指令。它們本質上是角成分。屬性指令用於改變DOM元素的行為，外觀和感覺。另一方面，結構指令用於通過添加，刪除或替換DOM中的元素來操縱DOM佈局。

>如何在Angular中創建自定義指令？首先，您需要從Angular Core導入指令裝飾器。然後，您需要定義指令類並用@Directive Decorator進行裝飾。裝飾器中的選擇屬性應匹配您要用於指令的名稱。最後，您需要將您的指令添加到NGMODULE中的聲明數組。

如何在Angular中使用內置指令？ >

>我如何將數據綁定到Angular中的指令？在幾種方面。一種常見的方法是通過屬性綁定，在其中您將DOM元素的屬性綁定到組件的屬性。您還可以使用事件綁定來響應用戶操作，或雙向綁定以保持模型並保持同步。在Angular中涉及創建使用指令然後測試該組件的測試組件。您可以使用TestBed實用程序來創建動態測試組件，然後使用componentFixture與組件及其指令進行交互。

>我可以在Angular中使用多個指令嗎？ >是的，您可以在Angular中的單個元素上使用多個指令。但是，您應該意識到，應用指令的順序會影響最終結果。 Angular按照模板中列出的順序應用指令，因此您應按照希望應用它們的順序列出您的指令。

>

如何將參數傳遞給Angular的指令？ 🎜>您可以使用@Input Decorator將參數傳遞到Angular的指令。這使您可以將指令的屬性綁定到組件中的值。然後，您可以在您的指令中使用此值來控制其行為。

>如何在Angular中創建一個共享指令？

在Angular中創建共享指令，您需要定義您的指令在共享模塊中。然後，您可以將此共享模塊導入要使用該指令的任何其他模塊。這使您可以在多個組件或模塊上重複使用相同的指令。

>

如何使用Chrome和Firefox的Angular DevTools擴展來完成角度的指令？此工具使您可以檢查應用程序的組件，指令和服務，並查看其當前狀態和依賴項。您也可以使用控制台與您的應用程序和調試問題進行交互。

>

以上是使用和創建角指令的實用指南 - 站點點的詳細內容。更多資訊請關注PHP中文網其他相關文章！