将夜猫腻小说,唐家三少

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

創(chuàng)新互聯(lián)Angular教程：Angular內(nèi)置指令

內(nèi)置指令

指令是為 Angular 應(yīng)用程序中的元素添加額外行為的類(lèi)。使用 Angular 的內(nèi)置指令，你可以管理表單、列表、樣式以及要讓用戶(hù)看到的任何內(nèi)容。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出涿鹿免費(fèi)做網(wǎng)站回饋大家。

要查看包含本指南中代碼的可工作范例，請(qǐng)參閱現(xiàn)場(chǎng)演練 / 下載范例。

Angular 指令的不同類(lèi)型如下：

組件 —— 帶有模板的指令。這種指令類(lèi)型是最常見(jiàn)的指令類(lèi)型。
屬性型指令 —— 更改元素、組件或其他指令的外觀(guān)或行為的指令。
結(jié)構(gòu)型指令 —— 通過(guò)添加和刪除 DOM 元素來(lái)更改 DOM 布局的指令。

本指南涵蓋了內(nèi)置的屬性型指令和結(jié)構(gòu)型指令。

內(nèi)置屬性型指令

屬性型指令會(huì)監(jiān)聽(tīng)并修改其它 HTML 元素和組件的行為、Attribute 和 Property。

許多 NgModule（例如 ?RouterModule ?和 ?FormsModule ?都定義了自己的屬性型指令。最常見(jiàn)的屬性型指令如下：

?NgClass ?—— 添加和刪除一組 CSS 類(lèi)。
?NgStyle ?—— 添加和刪除一組 HTML 樣式。
?NgModel ?—— 將數(shù)據(jù)雙向綁定添加到 HTML 表單元素。

內(nèi)置指令只會(huì)使用公開(kāi) API。它們不會(huì)訪(fǎng)問(wèn)任何無(wú)法被其它指令訪(fǎng)問(wèn)的私有 API。

用 NgClass 添加和刪除類(lèi)

用 ?ngClass ?同時(shí)添加或刪除多個(gè) CSS 類(lèi)。

要添加或刪除單個(gè)類(lèi)，請(qǐng)使用類(lèi)綁定而不是 ?NgClass?。

將 NgClass 與表達(dá)式一起使用

在要設(shè)置樣式的元素上，添加 ?[ngClass]? 并將其設(shè)置為等于某個(gè)表達(dá)式。在這里，是在 ?app.component.ts? 中將 ?isSpecial ?設(shè)置為布爾值 ?true?。因?yàn)?nbsp;?isSpecial ?為 ?true?，所以 ?ngClass ?就會(huì)把 ?special ?類(lèi)應(yīng)用于此 ?

? 上。


This div is special

將 NgClass 與方法一起使用

要將 ?NgClass ?與方法一起使用，請(qǐng)將方法添加到組件類(lèi)中。在下面的示例中，?setCurrentClasses()? 使用一個(gè)對(duì)象來(lái)設(shè)置屬性 ?currentClasses?，該對(duì)象根據(jù)另外三個(gè)組件屬性為 ?true ?或 ?false ?來(lái)添加或刪除三個(gè) CSS 類(lèi)。

該對(duì)象的每個(gè)鍵（key）都是一個(gè) CSS 類(lèi)名。如果鍵為 ?true?，則 ?ngClass ?添加該類(lèi)。如果鍵為 ?false?，則 ?ngClass ?刪除該類(lèi)。

currentClasses: Record = {};
/* . . . */
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

在模板中，把 ?ngClass ?屬性綁定到 ?currentClasses?，根據(jù)它來(lái)設(shè)置此元素的 CSS 類(lèi)：

This div is initially saveable, unchanged, and special.

在這個(gè)例子中，Angular 會(huì)在初始化以及發(fā)生更改的情況下應(yīng)用這些類(lèi)。完整的示例會(huì)在 ngOnInit() 中進(jìn)行初始化以及通過(guò)單擊按鈕更改相關(guān)屬性時(shí)調(diào)用 setCurrentClasses()。這些步驟對(duì)于實(shí)現(xiàn) ngClass 不是必需的。有關(guān)更多信息，請(qǐng)參見(jiàn) 現(xiàn)場(chǎng)演練 / 下載范例中的 app.component.ts 和 app.component.html。

用 NgStyle 設(shè)置內(nèi)聯(lián)樣式

可以用 ?NgStyle ?根據(jù)組件的狀態(tài)同時(shí)設(shè)置多個(gè)內(nèi)聯(lián)樣式。

要使用 ?NgStyle?，請(qǐng)向組件類(lèi)添加一個(gè)方法。

在下面的例子中，?setCurrentStyles()? 方法基于該組件另外三個(gè)屬性的狀態(tài)，用一個(gè)定義了三個(gè)樣式的對(duì)象設(shè)置了 ?currentStyles ?屬性。

currentStyles: Record = {};
/* . . . */
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

要設(shè)置元素的樣式，請(qǐng)將 ?ngStyle ?屬性綁定到 ?currentStyles?。


  This div is initially italic, normal weight, and extra large (24px).

用 ngModel 顯示和更新屬性

可以用 ?NgModel ?指令顯示數(shù)據(jù)屬性，并在用戶(hù)進(jìn)行更改時(shí)更新該屬性。

導(dǎo)入 ?FormsModule?，并將其添加到 NgModule 的 ?imports ?列表中。

import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
/* . . . */
@NgModule({
  /* . . . */

  imports: [
    BrowserModule,
    FormsModule // <--- import into the NgModule
  ],
  /* . . . */
})
export class AppModule { }

在 HTML 的 ?
? 元素上添加 ?[(ngModel)]? 綁定，并將其設(shè)置為等于此屬性，這里是 ?name?。

[(ngModel)]:

此 ?[(ngModel)]? 語(yǔ)法只能設(shè)置數(shù)據(jù)綁定屬性。

要自定義配置，你可以編寫(xiě)可展開(kāi)的表單，該表單將屬性綁定和事件綁定分開(kāi)。使用屬性綁定來(lái)設(shè)置屬性，并使用事件綁定來(lái)響應(yīng)更改。以下示例將 ?? 值更改為大寫(xiě)：

這里是所有這些變體的動(dòng)畫(huà)，包括這個(gè)大寫(xiě)轉(zhuǎn)換的版本：

NgModel 和值訪(fǎng)問(wèn)器

?NgModel ?指令適用于?ControlValueAccessor?支持的元素。Angular 為所有基本 HTML 表單元素提供了值訪(fǎng)問(wèn)器。

要將 ?[(ngModel)]? 應(yīng)用于非表單型內(nèi)置元素或第三方自定義組件，必須編寫(xiě)一個(gè)值訪(fǎng)問(wèn)器。

編寫(xiě) Angular 組件時(shí)，如果根據(jù) Angular 的雙向綁定語(yǔ)法命名 value 和 event 屬性，則不需要用值訪(fǎng)問(wèn)器（ControlValueAccessor）或 ?NgModel?。

內(nèi)置結(jié)構(gòu)型指令

結(jié)構(gòu)型指令的職責(zé)是 HTML 布局。它們塑造或重塑 DOM 的結(jié)構(gòu)，這通常是通過(guò)添加、移除和操縱它們所附加到的宿主元素來(lái)實(shí)現(xiàn)的。

本節(jié)會(huì)介紹最常見(jiàn)的內(nèi)置結(jié)構(gòu)型指令：

?NgIf ?—— 從模板中創(chuàng)建或銷(xiāo)毀子視圖。
?NgFor ?—— 為列表中的每個(gè)條目重復(fù)渲染一個(gè)節(jié)點(diǎn)。
?NgSwitch ?—— 一組在備用視圖之間切換的指令。

用 NgIf 添加或刪除元素

可以將 ?NgIf ?指令應(yīng)用于宿主元素來(lái)添加或刪除元素。

如果 ?NgIf ?為 ?false?，則 Angular 將從 DOM 中移除一個(gè)元素及其后代。然后，Angular 會(huì)銷(xiāo)毀其組件，從而釋放內(nèi)存和資源。

要添加或刪除元素，請(qǐng)?jiān)谝韵率纠?nbsp;?*ngIf? 綁定到條件表達(dá)式，例如 ?isActive?

當(dāng) ?isActive ?表達(dá)式返回真值時(shí)，?NgIf ?會(huì)把 ?ItemDetailComponent ?添加到 DOM 中。當(dāng)表達(dá)式為假值時(shí)，?NgIf ?會(huì)從 DOM 中刪除 ?ItemDetailComponent ?并銷(xiāo)毀該組件及其所有子組件。

防止 null

默認(rèn)情況下，?NgIf ?會(huì)阻止顯示已綁定到空值的元素。

要使用 ?NgIf ?保護(hù) ?

?，請(qǐng)將 ?*ngIf="yourProperty"? 添加到此 ?

?。在下面的例子中，?currentCustomer ?名字出現(xiàn)了，是因?yàn)榇_實(shí)存在一個(gè) ?currentCustomer?。

Hello, {{currentCustomer.name}}

但是，如果該屬性為 ?null?，則 Angular 就不會(huì)顯示 ?

?。在這個(gè)例子中，Angular 就不會(huì)顯示 ?nullCustomer?，因?yàn)樗鼮?nbsp;?null?。

Hello, {{nullCustomer}}

NgFor 條目列表

可以用 ?NgFor ?來(lái)指令顯示條目列表。

定義一個(gè) HTML 塊，該塊會(huì)決定 Angular 如何渲染單個(gè)條目。
要列出你的條目，請(qǐng)把一個(gè)簡(jiǎn)寫(xiě)形式 ?let item of items? 賦值給 ?*ngFor?。

{{item.name}}

字符串 ?"let item of items"? 會(huì)指示 Angular 執(zhí)行以下操作：

將 ?items ?中的每個(gè)條目存儲(chǔ)在局部循環(huán)變量 ?item ?中
讓每個(gè)條目都可用于每次迭代時(shí)的模板 HTML 中
將 ?"let item of items"? 轉(zhuǎn)換為環(huán)繞宿主元素的 ? ?
對(duì)列表中的每個(gè) ?item ?復(fù)寫(xiě)這個(gè) ??

復(fù)寫(xiě)組件視圖

要復(fù)寫(xiě)某個(gè)組件元素，請(qǐng)將 ?*ngFor? 應(yīng)用于其選擇器。在以下示例中，選擇器為 ??。

你可以在以下位置引用模板輸入變量，例如 ?item?：

在 ?ngFor ?的宿主元素中
在宿主元素的后代中，用以訪(fǎng)問(wèn)條目的屬性

以下示例首先在插值中引用 ?item?，然后將它通過(guò)綁定傳遞給 ?? 組件的 ?item ?屬性。

{{item.name}}

獲取 *ngFor 的 index

可以獲取 ?*ngFor? 的 ?index?，并在模板中使用它。

在 ?*ngFor? 中，添加一個(gè)分號(hào)和 ?let i=index? 簡(jiǎn)寫(xiě)形式。下面的例子中把 ?index ?取到一個(gè)名為 ?i? 的變量中，并將其與條目名稱(chēng)一起顯示。

{{i + 1}} - {{item.name}}

?NgFor ?指令上下文的 ?index ?屬性在每次迭代中都會(huì)返回該條目的從零開(kāi)始的索引號(hào)。

Angular 會(huì)將此指令轉(zhuǎn)換為 ??，然后反復(fù)使用此模板為列表中的每個(gè) ?item ?創(chuàng)建一組新的元素和綁定。

當(dāng)條件為真時(shí)復(fù)寫(xiě)元素

要在特定條件為 true 時(shí)復(fù)寫(xiě) HTML 塊，請(qǐng)將 ?*ngIf? 放在 ?*ngFor? 元素的容器元素上。它們之一或兩者都可以是 ??，這樣你就不必引入額外的 HTML 層次了。

由于結(jié)構(gòu)型指令會(huì)在 DOM 中添加和刪除節(jié)點(diǎn)，因此每個(gè)元素只能應(yīng)用一個(gè)結(jié)構(gòu)型指令。

用 *ngFor 的 trackBy 跟蹤條目

通過(guò)跟蹤對(duì)條目列表的更改，可以減少應(yīng)用程序?qū)Ψ?wù)器的調(diào)用次數(shù)。使用 ?*ngFor? 的 ?trackBy ?屬性，Angular 只能更改和重新渲染已更改的條目，而不必重新加載整個(gè)條目列表。

向該組件添加一個(gè)方法，該方法返回 ?NgFor ?應(yīng)該跟蹤的值。這個(gè)例子中，該值是英雄的 ?id?。如果瀏覽器已經(jīng)渲染過(guò)此 ?id?，Angular 就會(huì)跟蹤它，而不會(huì)重新向服務(wù)器查詢(xún)相同的 ?id?。

trackByItems(index: number, item: Item): number { return item.id; }

在簡(jiǎn)寫(xiě)表達(dá)式中，將 ?trackBy ?設(shè)置為 ?trackByItems()? 方法。


  ({{item.id}}) {{item.name}}

更改這些 ID 會(huì)使用新的 ?item.id? 創(chuàng)建新的條目。在下面的 ?trackBy ?效果演示中，Reset items 會(huì)創(chuàng)建一些具有和以前相同的 ?item.id? 的新條目。

如果沒(méi)有 ?trackBy?，這些按鈕都會(huì)觸發(fā)完全的 DOM 元素替換。
有了 ?trackBy?，則只有修改了 ?id ?的按鈕才會(huì)觸發(fā)元素替換。

為沒(méi)有 DOM 元素的指令安排宿主

Angular 的 ?? 是一個(gè)分組元素，它不會(huì)干擾樣式或布局，因?yàn)?nbsp;Angular 不會(huì)將其放置在 DOM 中。

當(dāng)沒(méi)有單個(gè)元素承載指令時(shí)，可以使用 ??。

這是使用 ?? 的條件化段落。


  I turned the corner
  
    and saw {{hero.name}}. I waved
  
  and continued on my way.

從 ?FormsModule ?中導(dǎo)入 ?ngModel ?指令。
將 ?FormsModule ?添加到相關(guān) Angular 模塊的 imports 部分。
要有條件地排除 ??，請(qǐng)將 ?? 包裹在 ?? 中。


  Pick your favorite hero
  (show sad)

用 NgSwitch

就像 JavaScript 的 ?switch ?語(yǔ)句一樣。?NgSwitch ?會(huì)根據(jù)切換條件顯示幾個(gè)可能的元素中的一個(gè)。Angular 只會(huì)將選定的元素放入 DOM。

?NgSwitch ?是一組指令（共三個(gè)）：

?NgSwitch ?—— 一個(gè)屬性型指令，它更改其伴生指令的行為。
?NgSwitchCase ?—— 結(jié)構(gòu)型指令，當(dāng)其綁定值等于開(kāi)關(guān)值時(shí)將其元素添加到 DOM 中，而在其不等于開(kāi)關(guān)值時(shí)將其綁定值移除。
?NgSwitchDefault ?—— 結(jié)構(gòu)型指令，當(dāng)沒(méi)有選中的 ?NgSwitchCase ?時(shí)，將其宿主元素添加到 DOM 中。

在每個(gè)元素（比如?
?）上，把 ?[ngSwitch]? 綁定到一個(gè)返回開(kāi)關(guān)值的表達(dá)式（例如 ?feature?）。盡管這個(gè)例子中 ?feature ?值是字符串，但此開(kāi)關(guān)值可以是任何類(lèi)型。
將各個(gè)分支元素綁定到 ?*ngSwitchCase? 和 ?*ngSwitchDefault?。

在父組件中，定義 ?currentItem ?以便可以在 ?[ngSwitch]? 表達(dá)式中使用它。

currentItem!: Item;

在每個(gè)子組件中，添加一個(gè)輸入屬性 ?item?，該屬性會(huì)綁定到父組件的 ?currentItem?。以下兩個(gè)片段顯示了父組件和其中一個(gè)子組件。其他子組件與 ?StoutItemComponent ?中的相同。

export class StoutItemComponent {
  @Input() item!: Item;
}

Switch 指令也同樣適用于內(nèi)置 HTML 元素和 Web Component。比如，你可以像下面的例子中一樣把 ?? 分支替換為 ?

?。

 Are you as bright as {{currentItem.name}}?

文章標(biāo)題：創(chuàng)新互聯(lián)Angular教程：Angular內(nèi)置指令
鏈接分享：http://fisionsoft.com.cn/article/dhipcds.html

其他資訊

快速導(dǎo)航

簇橋薇薇新娘
西部信息中心
樂(lè)山主機(jī)托管
網(wǎng)站優(yōu)化公司
網(wǎng)上商城開(kāi)發(fā)
錦江區(qū)公司注冊(cè)
成都燈箱廣告

友情鏈接

網(wǎng)站建設(shè)

聯(lián)系方式

企業(yè)：四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室
地址：成都市青羊區(qū)太升南路288號(hào)
電話(huà)：18980820575
網(wǎng)址：fisionsoft.com.cn

公司名稱(chēng)：四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室聯(lián)系電話(huà)：18980820575

網(wǎng)站備案號(hào)：蜀ICP備2024061352號(hào)-3

四川平武建站四川平武網(wǎng)站建設(shè) 四川平武網(wǎng)站設(shè)計(jì) 四川平武網(wǎng)站制作成都做網(wǎng)站