Angular的「ng-」元素

來自專欄 輕流QingFlow

Angular擁有很多遵循ng-命名約定的屬性，它們都共享一個共同的特徵（它們不會被渲染到最終的DOM中），但是在行為和用法上有所不同。

ng-container

我們一般用的最多的那個是ng-container。Angular 的<ng-container>是一個分組元素，但它不會污染樣式或元素布局，因為 Angular壓根不會把它放進 DOM中。

<！ - usage - > < ng-container > < p >我是一個段落。</ p > </ ng-container > <！ - result - > < p >我是一個段落。</ p >

要想知道這可能有用，可以想像你想有條件地包含多個元素而不破壞元素之間的父子關係（例如在列表或表中，或者關係用於CSS樣式規則的地方）或者重複條件一遍又一遍地：

<!-- 沒有ng-container: 無效的標記 --><ul> <li>One</li> <li>Two</li> <div *ngIf="moreThanTwo"> <li>Three</li> <li>Four</li> <li>Five</li> </div></ul><!-- 沒有ng-container: 重複 --><ul> <li>One</li> <li>Two</li> <li *ngIf="moreThanTwo">Three</li> <li *ngIf="moreThanTwo">Four</li> <li *ngIf="moreThanTwo">Five</li></ul><!-- 有ng-container --><ul> <li>One</li> <li>Two</li> <ng-container *ngIf="moreThanTwo"> <li>Three</li> <li>Four</li> <li>Five</li> </ng-container></ul>

ng-content

將HTML注入到指定位置的模板中的能力，這現在被稱為 「內容投影」。在這種情況下，ng-content 元素完全被投影內容所取代。例如，給定一個帶有選擇器的組件my-component：

<！ - template - > < ng-content > </ ng-content > <！ - usage - > < my-component > < p >我是一個段落。</ p > </ my-component > <！ - result - > < p >我是一個段落。</ p >

該元素還具有一個select屬性，允許您指定將哪個元素投影到哪裡，特別是當您ng-content為不同的投影內容使用多個元素時。一個更複雜的例子，使用類作為選擇器：

<！ - template - > < ng-content select = 「.first」 > </ ng-content > < ng-content select = 「.second」 > </ ng-content > <！ - usage - > < my-component > < p class = 「second」 >我將是最後一個。</ p > < p class = 「first」 >我會第一個。</ p > </ my-component > <！ class = 「first」 >我會第一個。</ p > < p class = 「second」 >我將是最後一個。</ p >

有三種選擇器可以使用：

• classes（select=".class"）;
• attributes（select="[attribute]"）; 和
• 元素（select="element"）。

它們可以根據需要進行組合; 使用全部三種：

<！ - template - > < ng-content select = 「p.foo [aria-label]」 > </ ng-content > <！ - usage - > < my-component > < p class = 「foo 「 >忽略我。</ p > < p class = 「foo」 aria-label = 「Projected」 >項目我。</ p > < p class = 「bar」 aria-label = 「忽略」 > 不理我。</ p ></ my-component > <！ - result - > < p class = 「foo」 aria-label = 「Projected」 > 投射我。</ p >

這對編寫你希望父組件具有一定影響力的標記的通用組件有用。但是，請注意，您不能這樣做<ng-content *ngFor="...">，因為內容僅曾經投影過一次，並且來自父項的投影內容無法引用子項中的變數。

請注意，如果您使用ngTemplateOutlet呈現子內容，則可以傳遞上下文。

<!-- template --><div> <p class="child">{{ childProperty }}</p> <ng-content></ng-content></div><!-- usage --><my-component> <p class="parent">{{ childProperty }}</p> <p class="parent">{{ parentProperty }}</p></my-component><!-- result --><div> <p class="child">I am a property of the child.</p> <p class="parent"></p> <p class="parent">I am a property of the parent.</p></div>

ng-template

<ng-template>是一個 Angular 元素，用來渲染 HTML。 它永遠不會直接顯示出來。 事實上，在渲染視圖之前，Angular 會把 <ng-template> 及其內容替換為一個注釋。

如果沒有使用結構型指令（例如*ngIf和*ngFor），而僅僅把一些別的元素包裝進 <ng-template> 中，那些元素就是不可見的。

<！ - bindings = { 「ng-reflect-ng-if」：「true」 } - > <！ - bindings = { 「ng-reflect-ng-switch-case」：「true」 } - > <！ - bindings = { 「ng-reflect-ng-for-of」：「[object Object]，[object Object」 } - >

這些綁定是告訴Angular要呈現什麼以及在什麼情況下的規則。如果沒有達到適當的條件，則根本不包括相關要素。結構指令通過ng-template兩步分解為元素：

<！ - original - > < p * ngIf = 「condition」 >也許顯示我？</ p > <！ - step 1 - > < p template = 「ngIf condition」 >也許顯示我嗎？</ p > <！ - step 2 - > < ng-template [ ngIf ] =「 condition 」 > < p >也許顯示我？</ p > </ ng-template >

正如你所看到的，這將語法糖變成了一個ng-template熟悉[...]="..."屬性綁定的元素。

如果您使用Angular 4.x,的，則需要對ngif上的then和else語法直接使用ng-template，因此默認情況下，替代元素不會出現在呈現的DOM中。以下是根據boolean屬性顯示兩個元素中的一個的四種方法：

<!-- 2.x version with ngSwitch --><div [ngSwitch]="condition"> <p *ngSwitchCase="true">Condition was true.</p> <p *ngSwitchDefault>Condition was false.</p></div><!-- 2.x version with ngIf twice --><div> <p *ngIf="condition">Condition was true.</p> <p *ngIf="!condition">Condition was false.</p></div><!-- 4.x version with ngIf; else --><div *ngIf="condition; else falseCase"> <p>Condition was true.</p></div><ng-template #falseCase> <p>Condition was false.</p></ng-template><!-- 4.x version with ngIf; then; else --><div *ngIf="condition; then trueCase; else falseCase"></div><ng-template #trueCase> <p>Condition was true.</p></ng-template><ng-template #falseCase> <p>Condition was false.</p></ng-template><!-- result (condition=true) --><div> <p>Condition was true.</p></div>

推薦閱讀：