Angular动态组件展示：<ng-template>与*ngIf该如何选择？

嘿，这个问题在Angular开发里太常见了！我来帮你理清楚这两种方式的差异，以及什么时候该选哪种：

你可能不知道，*ngIf 本质上就是 Angular 为了简化写法提供的语法糖，它底层会被编译成 ng-template 配合 ngIf 指令的形式。所以从渲染逻辑和性能上来说，两者没有任何显著差异——当条件不满足时，对应的组件都会被完全从 DOM 中移除（不是通过 CSS 隐藏），条件满足时再重新创建组件实例。

先看最直观的代码示例：

*ngIf 写法（简洁版） #

<!-- 简单的条件切换组件 -->
<app-user-profile *ngIf="isLoggedIn"></app-user-profile>
<app-login-form *ngIf="!isLoggedIn"></app-login-form>

这种写法直接在组件标签上添加指令，少了一层嵌套，代码干净易读，是日常开发的首选。

ng-template 写法（灵活版） #

<!-- 用 ng-template 实现同样的逻辑 -->
<ng-template [ngIf]="isLoggedIn">
  <app-user-profile></app-user-profile>
</ng-template>
<ng-template [ngIf]="!isLoggedIn">
  <app-login-form></app-login-form>
</ng-template>

这种写法显式使用了 ng-template 容器，看起来更啰嗦，但能解锁更多灵活用法。

优先用 *ngIf 的场景 #

• 当你只是需要简单的单条件渲染单个组件/元素时，*ngIf 绝对是最优解——写法简洁，维护成本低，团队里所有人都能一眼看懂。

选择 ng-template 的场景 #

ng-template 的优势在于模板复用和灵活的结构控制，比如：

1. 复用模板内容：如果同一段模板需要在多个地方根据不同条件渲染，用 ng-template 定义一次，再通过 ngTemplateOutlet 复用：

   <!-- 定义可复用的模板 -->
   <ng-template #emptyState>
     <div class="empty-state">暂无数据，请刷新重试</div>
   </ng-template>
   
   <!-- 在列表为空时复用模板 -->
   <div *ngIf="userList.length === 0">
     <ng-container *ngTemplateOutlet="emptyState"></ng-container>
   </div>
   
   <!-- 在订单列表为空时也复用同一模板 -->
   <div *ngIf="orderList.length === 0">
     <ng-container *ngTemplateOutlet="emptyState"></ng-container>
   </div>
   

2. 配合其他结构型指令：比如在 ngSwitch 中定义不同的模板分支，或者作为 ngFor 的空状态模板：

   <div [ngSwitch]="userRole">
     <ng-template ngSwitchCase="admin">
       <app-admin-dashboard></app-admin-dashboard>
     </ng-template>
     <ng-template ngSwitchCase="user">
       <app-user-dashboard></app-user-dashboard>
     </ng-template>
     <ng-template ngSwitchDefault>
       <app-guest-view></app-guest-view>
     </ng-template>
   </div>
   

3. 动态控制模板渲染位置：通过 ngTemplateOutlet 可以把模板渲染到任意你想要的位置，这是 *ngIf 做不到的。

回到你的问题：如果只是两个组件的简单条件切换，*ngIf 的写法完全合适，甚至是更优的选择——它足够简洁，且和 ng-template 写法没有性能差异。只有当你需要模板复用、复杂结构控制时，才需要考虑用 ng-template。

内容的提问来源于stack exchange，提问作者DiPix