Angular 4中如何为*ngIf的else分支传递上下文？

我太懂这种被嵌套模板搞疯的感觉了！一堆ng-template叠来叠去，再加上ngSwitch的话，代码可读性直接跳水。要是*ngIf的else分支能像*ngTemplateOutlet那样，直接通过context传递参数，代码肯定清爽太多了。

可惜的是，Angular原生的*ngIf语法本身并不支持直接给else分支附加上下文参数——它的else语法只能绑定一个ng-template的引用，没法直接跟context配置项。

你找到的「嵌套*ngTemplateOutlet」确实是现阶段最可行的原生解决方案，给你举个实际的代码例子，能更直观看到怎么用：

<!-- 定义带参数的else模板 -->
<ng-template #elseContent let-item="item">
  <div>Else分支内容：{{ item.name }}</div>
</ng-template>

<!-- 主ngIf分支 -->
<div *ngIf="isShowMain; else elseWrapper">
  主分支展示内容
</div>

<!-- 用嵌套Outlet传递上下文 -->
<ng-template #elseWrapper>
  <ng-container *ngTemplateOutlet="elseContent; context:{ item: currentItem }"></ng-container>
</ng-template>

虽然多了一层ng-container和临时的模板引用，但这是目前唯一能实现给else分支传参的方式，而且比起嵌套ngSwitch已经简洁不少了。要是觉得模板引用名太啰嗦，可以起些短名字（比如#outlet），能稍微减少点视觉上的繁琐感。

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