面试题：Angular中ngIf指令的基本使用场景及原理

Question

请描述Angular内置指令ngIf的常见使用场景，并简要说明其工作原理。同时，举例说明ngIf在模板中如何结合其他指令使用。

Answer 1

常见使用场景

1. 条件渲染：根据某个条件决定是否在DOM中渲染一个元素或一组元素。例如，只有当用户已登录时才显示“注销”按钮。
2. 切换视图：依据不同的业务逻辑，在模板中切换不同的视图部分。比如，根据用户权限，展示不同的管理界面。

工作原理

ngIf指令会根据表达式的值来决定是否将宿主元素添加到DOM中或从DOM中移除。当表达式的值为true时，ngIf会创建并添加宿主元素及其子元素到DOM；当表达式的值为false时，ngIf会移除宿主元素及其所有子元素，同时销毁该元素及其子元素相关的组件实例（如果有），从而释放相关资源。

结合其他指令使用示例

<div *ngIf="isLoggedIn; then loggedInView else loggedOutView"></div>

<ng-template #loggedInView>
  <p>欢迎，{{userName}}！</p>
  <button (click)="logout()">注销</button>
  <ul>
    <li *ngFor="let item of userDashboardItems">{{item}}</li>
  </ul>
</ng-template>

<ng-template #loggedOutView>
  <p>请登录以访问更多功能。</p>
  <button (click)="login()">登录</button>
</ng-template>

在上述示例中，ngIf与ngFor指令结合使用。ngIf根据isLoggedIn的值决定渲染哪个ng-template。在已登录视图（loggedInView）中，ngFor用于循环显示用户仪表盘的项目。