這篇文章主要介紹了Angular2之結(jié)構(gòu)型指令的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司自成立以來(lái)，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、做網(wǎng)站、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個(gè)性化軟件開(kāi)發(fā)等基于互聯(lián)網(wǎng)的全面整合營(yíng)銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開(kāi)發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開(kāi)發(fā)工程師團(tuán)隊(duì)及專業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。

Angular 有一個(gè)強(qiáng)力的模板引擎，它能讓你輕松維護(hù)元素的DOM樹(shù)結(jié)構(gòu)。

Angular指令可分為三種

1. 組件

2. 屬性型指令

3. 結(jié)構(gòu)型指令

組件

組件其實(shí)就是一個(gè)帶模板的指令。是這三種指令中最常用的，我們會(huì)編寫(xiě)大量的組件來(lái)構(gòu)建application。

屬性型指令

屬性型指令會(huì)修改元素的外觀或者行為。 e.g. NgStyle可以修改元素的好幾個(gè)樣式。

結(jié)構(gòu)型指令

結(jié)構(gòu)型指令通過(guò)添加和刪除 DOM 元素來(lái)改變DOM的布局。

我們經(jīng)常看到的內(nèi)置的結(jié)構(gòu)型指令有：ngIf、ngSwitch、ngFor。

下面我們著重介紹ngIf。

NgIf案例分析

該指令接受一個(gè)布爾值，并據(jù)此讓一整塊DOM樹(shù)出現(xiàn)或者消失。

注意：這里是出現(xiàn)或者消失，并不是隱藏。

隱藏元素的利弊

當(dāng)我們隱藏元素時(shí)，組件的行為還在繼續(xù)。

它仍然附加子啊它所屬于的DOM元素上，它仍然在監(jiān)聽(tīng)事件。angular會(huì)繼續(xù)檢查哪些能影響數(shù)據(jù)綁定的變更。組件原本要做的哪些事情仍然在進(jìn)行！它還是占用著那么多的資源。

另外一方面，重新顯示這個(gè)組件會(huì)很快。

組件以前的狀態(tài)被保留著，并隨時(shí)可以顯示。組件不用重新初始化，當(dāng)然，該操作付出代價(jià)比較大！

移除元素組件

利

把ngIf設(shè)置為false，將會(huì)影響到組件的資源消耗。angular會(huì)從DOM中移除該元素，停止相關(guān)組件的變更檢測(cè)，把它從DOM事件中移除，并且銷毀組件。組件會(huì)被垃圾回收，并釋放內(nèi)存。

弊

如果我們很快再次使用這個(gè)組件的時(shí)候，重建組件的代價(jià)是非常大的。

當(dāng)ngIf重新變成true的時(shí)候，angular會(huì)重新創(chuàng)建該組件及其子樹(shù)。angular會(huì)重新運(yùn)行每個(gè)組件的初始化邏輯。

總結(jié)

基于上面的利弊分析，無(wú)論是我們?cè)谑褂脙?nèi)置的指令還是使用自定的指令的時(shí)候，我們應(yīng)該自己分析提添加、移除元素以及創(chuàng)建和銷毀組件的后果。

標(biāo)簽

在Angular應(yīng)用之外，標(biāo)簽的默認(rèn)CSS屬性display是none。 它的內(nèi)容存在于一個(gè)隱藏的文檔片段中。
而在Angular應(yīng)用中，Angular會(huì)移除 標(biāo)簽及其子元素。

我們可以通過(guò)把短語(yǔ)”Hip! Hip! Hooray!”中間的”hip”包在一個(gè)標(biāo)簽中來(lái)驗(yàn)證下這個(gè)效果。

 Hip!



 Hooray!

這時(shí)候顯示的內(nèi)容是'Hip! Hooray!'，在Angular的控制下，DOM的效果是不同的。

顯然，Angular把標(biāo)簽及其內(nèi)容替換成了一個(gè)空白

自定義指令

我們自頂一個(gè)類似ngIf的指令。

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

/** 選中器[],是匹配頁(yè)面上的指令，可以有多個(gè)名稱，由于是自己的指令，所以沒(méi)有使用ng開(kāi)頭 */
@Directive({ selector: '[myUnless]' })
export class UnlessDirective {
 /**
  * 我們需要訪問(wèn)模板，并且還需要一個(gè)渲染器來(lái)渲染它的內(nèi)容。
  * 我們通過(guò)TemplateRef來(lái)訪問(wèn)模板。渲染器是ViewContainerRef。
  * 我們把它們都作為私有變量注入到構(gòu)造函數(shù)中。
  */
 constructor(
  private templateRef: TemplateRef,
  private viewContainer: ViewContainerRef
  ) { }

 /**
  * 如果條件為假，我們就渲染模板，否則就清空元素內(nèi)容。
  * 我們現(xiàn)在先把myUnless屬性定義成一個(gè)“只寫(xiě)”屬性。
  */
 @Input() set myUnless(condition: boolean) {
  if (!condition) {
   this.viewContainer.createEmbeddedView(this.templateRef);
  } else {
   this.viewContainer.clear();
  }
 }
}

幾個(gè)概念

星號(hào)(*)效果

這個(gè)星號(hào)是一種“語(yǔ)法糖”。它簡(jiǎn)化了ngIf和ngFor —— 無(wú)論是寫(xiě)還是讀。

ngIf

接下來(lái)這兩個(gè)ngIf范例的效果完全相同，只是我們寫(xiě)成了另一種風(fēng)格：

 Our heroes are true!




 

  Our heroes are true!
 

要知道，Angular會(huì)把風(fēng)格(A)寫(xiě)成風(fēng)格(B)。 它把段落及其內(nèi)容移到了 標(biāo)簽中。 它把指令移到了 標(biāo)簽上，成為該標(biāo)簽的一個(gè)屬性綁定 —— 包裝在方括號(hào)中。 宿主組件的condition 屬性的布爾值決定該模板的內(nèi)容是否應(yīng)該被顯示。

ngFor

Angular把*ngFor轉(zhuǎn)換成一個(gè)類似的形式：

{{ hero }}