Angular中什么是结构指令 如何使用

什么是结构指令

Angular 中的结构指令是一种特殊的指令，被用于操作 DOM，以实现对页面元素自身以及其它元素的添加、删除、移动等操作。

Angular 提供了三种结构指令，分别是 *ngIf、*ngFor、*ngSwitch，这三种指令都使用了星号语法，在模版中使用它们时都需要使用 * 符号。

        <!-- if 指令 -->
        <div *ngIf="isShow">
            我是显示的内容
        </div>
    

在上述代码中，*ngIf="isShow" 表示条件为 true 时，该元素才会被渲染。

如何使用结构指令

结构指令可以被用于 ng-template、ng-container、任何 HTML 元素和组件元素上。

        <!-- if 指令 -->
        <div *ngIf="isShow">
            我是显示的内容
        </div>

        <!-- for 指令 -->
        <ul>
            <li *ngFor="let item of list">
                {{item}}
            </li>
        </ul>
    

在上述代码中，使用了两种不同的结构指令，分别是 *ngIf 和 *ngFor，它们分别应用在 div 和 li 元素上。

结构指令的一般规则

结构指令使用的是 star 规范，表示该元素是一个模板。

如果需要在一个元素中使用多个指令，则可以使用分号 ; 进行分隔。

        <!-- if 和 for 指令 -->
        <div *ngIf="isShow; else elseBlock" *ngFor="let item of list">
            {{item}}
        </div>
        
        <ng-template #elseBlock>
            <div>我是 else 内容</div>
        </ng-template>
    

在上述代码中，使用了两个不同的结构指令： if 和 for 指令。这两个指令同时应用在 div 元素上，中间使用分号 ; 进行分隔。除此之外，还定义了一个 else 部分，它是使用 ng-template 标签定义的。

总结

结构指令是 Angular 中很重要的一个特性，主要用来操作 DOM，实现对页面元素自身以及其它元素的添加、删除、移动等操作。Angular 提供了三种结构指令： ngIf、ngFor、ngSwitch，分别被用来实现条件语句、循环语句及条件分支语句。在使用时需要注意，结构指令使用的是 star 规范，表示该元素是一个模板，可以应用于任何 HTML 元素和组件元素上。