## 什么是结构型指令？ ``` 结构型指令的职责是 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> ```