Angular 结构型指令

Angular 中的结构型指令是一种特殊类型的指令，用于改变 DOM 树的结构。这些指令通过添加、删除或替换 DOM 元素来修改视图的结构。Angular 提供了一些内置的结构型指令，包括 ngIf、ngFor 和 ngSwitch。

1. ngIf： ngIf 指令根据表达式的真假值来添加或移除 DOM 元素。如果表达式为真，元素就会被添加到 DOM 中，反之则会被移除。

   <div *ngIf="condition">内容显示在条件为真时</div>

2. ngFor： ngFor 指令用于迭代集合，并为集合中的每个元素创建一个模板实例。它允许你重复渲染相同的 HTML 结构，每次都使用集合中的不同元素。

   <ul>
     <li *ngFor="let item of items">{{ item }}</li>
   </ul>

3. ngSwitch： ngSwitch 指令根据多个可能的值切换视图。你可以使用它代替一系列嵌套的 ngIf。

   <div [ngSwitch]="value">
     <div *ngSwitchCase="'case1'">条件为case1时显示的内容</div>
     <div *ngSwitchCase="'case2'">条件为case2时显示的内容</div>
     <div *ngSwitchDefault>默认显示的内容</div>
   </div>

这些结构型指令是 Angular 模板中强大的工具，它们允许你根据条件、集合内容和特定值来动态地修改视图结构。

转载请注明出处：http://www.pingtaimeng.com/article/detail/4932/Angular