結(jié)構(gòu)型指令的職責(zé)是HTML布局。 它們塑造或重塑DOM的結(jié)構(gòu)，比如添加、移除或維護(hù)這些元素。

像其它指令一樣，你可以把結(jié)構(gòu)型指令應(yīng)用到一個(gè)宿主元素上。 然后它就可以對(duì)宿主元素及其子元素做點(diǎn)什么。

結(jié)構(gòu)型指令非常容易識(shí)別。 在這個(gè)例子中，星號(hào)（*）被放在指令的屬性名之前。

<div *ngIf="hero" >{{hero.name}}</div>

三個(gè)常用的內(nèi)置結(jié)構(gòu)型指令 ——?NgIf、NgFor和NgSwitch...。?

1 <div *ngIf="hero" >{{hero.name}}</div> 2 3 <ul> 4 <li *ngFor="let hero of heroes">{{hero.name}}</li> 5 </ul> 6 7 <div [ngSwitch]="hero?.emotion"> 8 <app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero> 9 <app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero> 10 <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero> 11 <app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero> 12 </div>

ngIf內(nèi)幕

<div *ngIf="hero" >{{hero.name}}</div><ng-template [ngIf]="hero"> <div>{{hero.name}}</div> </ng-template>

• *ngIf指令被移到了<ng-template>元素上。在那里它變成了一個(gè)屬性綁定[ngIf]。

• <div>上的其余部分，包括它的class屬性在內(nèi)，移到了內(nèi)部的<ng-template>元素上。

*ngFor內(nèi)幕

?

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">({{i}}) {{hero.name}} </div><ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"><div [class.odd]="odd">({{i}}) {{hero.name}}</div> </ng-template>

?

每個(gè)宿主元素上只能有一個(gè)結(jié)構(gòu)型指令

有時(shí)我們會(huì)希望只有當(dāng)特定的條件為真時(shí)才重復(fù)渲染一個(gè) HTML 塊。 你可能試過(guò)把*ngFor和*ngIf放在同一個(gè)宿主元素上，但Angular 不允許。這是因?yàn)槲覀冊(cè)谝粋€(gè)元素上只能放一個(gè)結(jié)構(gòu)型指令。

原因很簡(jiǎn)單。結(jié)構(gòu)型指令可能會(huì)對(duì)宿主元素及其子元素做很復(fù)雜的事。當(dāng)兩個(gè)指令放在同一個(gè)元素上時(shí)，誰(shuí)先誰(shuí)后？NgIf優(yōu)先還是NgFor優(yōu)先？NgIf可以取消NgFor的效果嗎？ 如果要這樣做，Angular 應(yīng)該如何把這種能力泛化，以取消其它結(jié)構(gòu)型指令的效果呢？

對(duì)這些問(wèn)題，沒(méi)有辦法簡(jiǎn)單回答。而禁止多個(gè)結(jié)構(gòu)型指令則可以簡(jiǎn)單地解決這個(gè)問(wèn)題。 這種情況下有一個(gè)簡(jiǎn)單的解決方案：把*ngIf放在一個(gè)"容器"元素上，再包裝進(jìn)?*ngFor?元素。 這個(gè)元素可以使用ng-container，以免引入一個(gè)新的HTML層級(jí)。

NgSwitch?內(nèi)幕

Angular 的?NgSwitch?實(shí)際上是一組相互合作的指令：NgSwitch、NgSwitchCase?和?NgSwitchDefault。

星號(hào)（*）語(yǔ)法比不帶語(yǔ)法糖的形式更加清晰。 如果找不到單一的元素來(lái)應(yīng)用該指令，可以使用<ng-container>作為該指令的容器。

?

?

?

<ng-template>指令

<ng-template>是一個(gè) Angular 元素，用來(lái)渲染HTML。 它永遠(yuǎn)不會(huì)直接顯示出來(lái)。 事實(shí)上，在渲染視圖之前，Angular 會(huì)把<ng-template>及其內(nèi)容替換為一個(gè)注釋。

如果沒(méi)有使用結(jié)構(gòu)型指令，而僅僅把一些別的元素包裝進(jìn)<ng-template>中，那些元素就是不可見(jiàn)的。 在下面的這個(gè)短語(yǔ)"Hip! Hip! Hooray!"中，中間的這個(gè) "Hip!"（歡呼聲） 就是如此

<p>Hip!</p> <ng-template><p>Hip!</p> </ng-template> <p>Hooray!</p>

<ng-container> 的救贖

Angular的<ng-container>是一個(gè)分組元素，但它不會(huì)污染樣式或元素布局，因?yàn)?Angular?壓根不會(huì)把它放進(jìn) DOM?中。

<p>I turned the corner<ng-container *ngIf="hero">and saw {{hero.name}}. I waved</ng-container> and continued on my way. </p> 1 <div> 2 Pick your favorite hero 3 (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>) 4 </div> 5 <select [(ngModel)]="hero"> 6 <ng-container *ngFor="let h of heroes"> 7 <ng-container *ngIf="showSad || h.emotion !== 'sad'"> 8 <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option> 9 </ng-container> 10 </ng-container> 11 </select>

自定義結(jié)構(gòu)性指令

component.ts

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';/*** Add the template content to the DOM unless the condition is true.*/ @Directive({ selector: '[appUnless]'}) export class UnlessDirective {private hasView = false;constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) { }@Input() set appUnless(condition: boolean) {if (!condition && !this.hasView) {this.viewContainer.createEmbeddedView(this.templateRef);this.hasView = true;} else if (condition && this.hasView) {this.viewContainer.clear();this.hasView = false;}} }

component.html

<p *appUnless="condition" class="unless a">(A) This paragraph is displayed because the condition is false. </p><p *appUnless="!condition" class="unless b">(B) Although the condition is true,this paragraph is displayed because myUnless is set to false. </p>

?

轉(zhuǎn)載于:https://www.cnblogs.com/jay-mw/p/7779587.html

總結(jié)

以上是生活随笔為你收集整理的Angular2+ 结构型指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。