結構型指令的職責是HTML布局。 它們塑造或重塑DOM的結構，比如添加、移除或維護這些元素。

像其它指令一樣，你可以把結構型指令應用到一個宿主元素上。 然后它就可以對宿主元素及其子元素做點什么。

結構型指令非常容易識別。 在這個例子中，星號（*）被放在指令的屬性名之前。

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

三個常用的內置結構型指令 ——?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內幕

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

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

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

*ngFor內幕

?

<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>

?

每個宿主元素上只能有一個結構型指令

有時我們會希望只有當特定的條件為真時才重復渲染一個 HTML 塊。 你可能試過把*ngFor和*ngIf放在同一個宿主元素上，但Angular 不允許。這是因為我們在一個元素上只能放一個結構型指令。

原因很簡單。結構型指令可能會對宿主元素及其子元素做很復雜的事。當兩個指令放在同一個元素上時，誰先誰后？NgIf優(yōu)先還是NgFor優(yōu)先？NgIf可以取消NgFor的效果嗎？ 如果要這樣做，Angular 應該如何把這種能力泛化，以取消其它結構型指令的效果呢？

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

NgSwitch?內幕

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

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

?

?

?

<ng-template>指令

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

如果沒有使用結構型指令，而僅僅把一些別的元素包裝進<ng-template>中，那些元素就是不可見的。 在下面的這個短語"Hip! Hip! Hooray!"中，中間的這個 "Hip!"（歡呼聲） 就是如此

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

<ng-container> 的救贖

Angular的<ng-container>是一個分組元素，但它不會污染樣式或元素布局，因為 Angular?壓根不會把它放進 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>

自定義結構性指令

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>

?

轉載于:https://www.cnblogs.com/jay-mw/p/7779587.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。