面试题：Angular中NgIf和NgSwitch指令的高效应用场景

Question

请阐述Angular中NgIf和NgSwitch指令各自适合的应用场景，并举例说明如何在实际项目中高效使用它们来控制DOM元素的显示与隐藏。同时说明在使用NgIf时，频繁添加和移除DOM元素可能带来的性能问题及解决方案。

Answer 1

NgIf指令

• 适合场景：当根据条件决定是否渲染一个DOM元素时使用。如果条件为false，该元素及其子元素会从DOM中完全移除；条件为true时，才会渲染到DOM中。常用于某些元素仅在特定条件下才需要存在于页面的情况，比如用户登录后显示用户相关操作按钮等。
• 实际项目示例：

<div *ngIf="isLoggedIn">
  <button (click)="logout()">Logout</button>
</div>

在上述代码中，只有当isLoggedIn为true时，包含Logout按钮的div元素才会被渲染到DOM中。

NgSwitch指令

• 适合场景：当需要根据多个条件中的一个来显示不同的DOM元素时使用。它类似于JavaScript中的switch - case语句，适用于从多个选项中选择一个进行展示的场景，例如根据用户角色显示不同的界面布局。
• 实际项目示例：

<div [ngSwitch]="userRole">
  <div *ngSwitchCase="'admin'">
    <p>Admin - specific content</p>
  </div>
  <div *ngSwitchCase="'user'">
    <p>User - specific content</p>
  </div>
  <div *ngSwitchDefault>
    <p>Default content</p>
  </div>
</div>

这里根据userRole的值，展示不同的内容。如果userRole是admin，显示管理员特定内容；如果是user，显示用户特定内容；否则显示默认内容。

NgIf性能问题及解决方案

• 性能问题：频繁添加和移除DOM元素会带来性能开销。每次添加或移除DOM元素时，浏览器都需要重新计算布局（reflow）和重新绘制（repaint），这在复杂页面中会影响应用的性能和响应速度。
• 解决方案：
  • 使用ngIf结合ngIfElse：如果切换频率较高，可以使用ngIf结合ngIfElse。这样可以提前创建好两个元素，只是控制它们的显示和隐藏，而不是频繁创建和销毁。

<div *ngIf="isLoading; then loadingTemplate else contentTemplate"></div>
<ng-template #loadingTemplate>
  <p>Loading...</p>
</ng-template>
<ng-template #contentTemplate>
  <p>Actual content here</p>
</ng-template>

- **缓存数据**：如果`ngIf`控制的内容包含复杂的计算或异步操作，在条件切换时重新计算会浪费性能。可以将这些计算结果或异步数据进行缓存，当条件变化时复用这些数据，减少不必要的计算。
- **使用`ngClass`替代部分场景**：对于简单的显示隐藏切换，若不需要完全从DOM移除元素，可以使用`ngClass`结合CSS的`display`属性来控制元素显示隐藏，避免频繁的DOM操作。例如：

<div [ngClass]="{'hidden':!isVisible}">
  Some content
</div>

.hidden {
  display: none;
}