Angular模板中多ngIf else传参及双重ngIf判断实现问询

嘿，刚学Angular遇到模板逻辑的问题太正常啦，我来给你捋清楚这两个问题～

在Angular的*ngIf else结构里传递参数，主要有两种常用方式，看你需求来选：

• 直接复用组件类中的属性：如果参数是组件里已经定义好的变量，那else模板可以直接引用，不用额外传递。比如：

<!-- 主模板 -->
<div *ngIf="isResourceAvailable; else unavailableTip">
  资源已就绪，可以使用
</div>
<!-- else模板 -->
<ng-template #unavailableTip>
  资源不可用，原因：{{resourceUnavailableReason}}
</ng-template>

这里resourceUnavailableReason是组件类里的属性，else模板直接就能用，很方便。

• 通过ngTemplateOutlet传递上下文参数：如果需要动态传递不同的参数给else模板，可以用模板嵌套+上下文传递的方式。比如：

<!-- 主模板 -->
<div *ngIf="!showItemDetail; else detailTemplate">
  点击查看详情
</div>
<!-- 定义可接收参数的else模板 -->
<ng-template #detailTemplate let-item="selectedItem">
  物品名称：{{item.name}} <br>
  物品描述：{{item.description}}
</ng-template>
<!-- 触发详情显示时传递参数 -->
<button (click)="showItemDetail = true" 
        [ngTemplateOutlet]="detailTemplate" 
        [ngTemplateOutletContext]="{selectedItem: currentItem}">
  查看详情
</button>

这里用let-item="selectedItem"来接收上下文里的selectedItem参数，灵活性更高。

这个需求完全可以实现，有两种写法，都很适合新手：

• 方式1：合并逻辑表达式到单个*ngIf
  直接把两个判断条件用逻辑与（&&）连起来，JavaScript的短路求值特性会先判断第一个条件，只有第一个条件满足（教师限制为false），才会去判断第二个条件（教室是否可用）。代码示例：

<div *ngIf="!teacherRestriction && classroomAvailable">
  可以进入教室上课啦 🎉
</div>

如果想分别提示不同的失败情况，可以补充else分支：

<div *ngIf="!teacherRestriction && classroomAvailable; else checkFailed">
  可以进入教室上课啦 🎉
</div>
<ng-template #checkFailed>
  <div *ngIf="teacherRestriction">存在教师限制，暂时无法使用教室</div>
  <div *ngIf="!teacherRestriction && !classroomAvailable">教师限制已解除，但教室当前不可用</div>
</ng-template>

• 方式2：嵌套*ngIf（更直观）
  如果觉得合并表达式不够清晰，可以用嵌套的*ngIf，分步判断，逻辑一目了然：

<!-- 第一步：检查教师限制 -->
<div *ngIf="!teacherRestriction">
  <!-- 教师限制已通过，第二步检查教室 -->
  <div *ngIf="classroomAvailable">
    教室可用，可正常使用
  </div>
  <div *ngIf="!classroomAvailable">
    教师限制已解除，但教室当前不可用，请稍后再试
  </div>
</div>
<!-- 教师限制未通过的情况 -->
<div *ngIf="teacherRestriction">
  存在教师限制，暂时无法使用教室
</div>

这种写法适合需要给每一步判断结果单独提示的场景，新手更容易理解维护。

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