Angular 17如何用@if @else复用同一ng-template替代*ngIf

在Angular 17中，你可以通过@template定义可复用模板，再结合ngTemplateOutlet指令，实现多个@if语句复用同一个else分支的效果，完全满足不合并@if、不使用||运算符的要求。

原Angular 16代码参考 #

<div *ngIf="tracks.length > 0; else noTracks">
  <!-- 已加载曲目内容 -->
</div>

<div *ngIf="isLoading === false; else noTracks">
  <!-- 加载完成后的其他内容 -->
</div>

<ng-template #noTracks>
  <p>暂无曲目数据</p>
</ng-template>

Angular 17 实现代码 #

<!-- 定义可复用的模板 -->
@template(#noTracks) {
  <p>暂无曲目数据</p>
}

<!-- 第一个@if语句，复用noTracks模板作为else分支 -->
@if (tracks.length > 0) {
  <!-- 已加载曲目内容 -->
} @else {
  <ng-container [ngTemplateOutlet]="noTracks"></ng-container>
}

<!-- 第二个@if语句，同样复用noTracks模板 -->
@if (isLoading === false) {
  <!-- 加载完成后的其他内容 -->
} @else {
  <ng-container [ngTemplateOutlet]="noTracks"></ng-container>
}

说明 #

1. @template(#noTracks)是Angular 17中定义模板的新语法，等价于Angular 16中的<ng-template #noTracks>，写法更简洁。
2. ngTemplateOutlet指令用于渲染指定的模板，通过[ngTemplateOutlet]="noTracks"可以在任意@else分支中复用同一个模板。
3. 这种方式保持了两个@if语句的独立性，不会触发因使用||运算符导致的never类型错误，完美匹配你的需求。

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