## 什么是結構型指令？ ``` 結構型指令的職責是 HTML 布局。 它們塑造或重塑 DOM 的結構，比如添加、移除或維護這些元素，說白了就是對DOM元素的操作。 ``` 像其它指令一樣，你可以把結構型指令應用到一個DOM元素上。 然后它就可以對DOM元素及其子元素做點什么。 >[danger] 在一個元素上可以使用多個屬性型指令，但只能使用一個結構型指令 ## 一、\*ngIf ``` <div *ngIf="isActive;else elseBlock">變量true時顯示</div> <ng-template #elseBlock><div class="false">變量為false顯示</div></ng-template> ``` ## 二、\*ngFor ``` <li *ngFor="let item of arrayList; let key = index"> {{key}}:{{item}} </li> ``` ## 三、\[ngSwitch\] ``` <div [ngSwitch]="htmltags"> <div *ngSwitchCase="'div'">div標簽</div> <span *ngSwitchCase="'span'">span標簽</span> <p *ngSwitchCase="'p'">p標簽</p> <a *ngSwitchDefault>a標簽</a> </div> ``` ## 四、ng-container >[info] ng-container標簽作為結構性指令的宿主元素不會被渲染在頁面中 ``` // ng-container標簽不會被渲染在頁面中 <ng-container *ngIf="htmltags"> <div> and saw I waved</div> </ng-container> ```