Angular 17+中如何结合<ng-template>与@if指令实现条件渲染？

你遇到的问题主要有两个可能的原因，对应不同的修复方式：

1. 若使用Angular 17+（支持稳定版@if语法） #

你代码里@else块的<div>属于多余节点，虽不影响功能，但会生成额外DOM元素。更简洁的写法是用<ng-container>承载*ngTemplateOutlet，避免冗余DOM：

<ng-template #temp>
  <p> Hi, I'm else part</p>
</ng-template>

@if(false) {
  <p>Hi, I'm a if part</p>
} 
@else {
  <ng-container *ngTemplateOutlet="temp"></ng-container>
}

如果不需要复用模板，还可以直接把else内容写在@else块里，省去模板引用：

@if(false) {
  <p>Hi, I'm a if part</p>
} 
@else {
  <p> Hi, I'm else part</p>
}

2. 若使用Angular 16及以下版本 #

此时@if语法尚未稳定，默认无法使用，需改用传统的*ngIf+else模板写法：

<ng-template #temp>
  <p> Hi, I'm else part</p>
</ng-template>

<p *ngIf="false; else temp">Hi, I'm a if part</p>

这种写法是Angular旧版本实现if-else逻辑的标准方式，兼容性更强。

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