如何为Angular 5中*ngIf引用的模板传递上下文？

嘿，这个问题我刚好踩过坑！在Angular 5里，要给*ngIf的then/else模板传递上下文，其实可以结合NgTemplateOutlet的上下文绑定语法来实现，下面给你两种实用的实现方式：

方法一：直接在*ngIf中绑定上下文 #

这种方式比较紧凑，直接在*ngIf所在元素上通过[ngTemplateOutletContext]传递上下文，同时在模板里用let-语法接收变量：

首先定义两个可复用的模板：

<!-- 用户信息模板，接收user变量 -->
<ng-template #userTemplate let-user="user">
  <div class="user-card">
    <h3>{{user.name}}</h3>
    <p>邮箱：{{user.email}}</p>
  </div>
</ng-template>

<!-- 无用户数据模板，接收message变量 -->
<ng-template #emptyTemplate let-message="message">
  <p class="empty-tip">{{message}}</p>
</ng-template>

然后在*ngIf中使用并传递上下文：

<div 
  *ngIf="currentUser; then userTemplate; else emptyTemplate"
  [ngTemplateOutletContext]="{user: currentUser, message: '暂无用户数据，请登录'}"
></div>

这里要注意：Angular 5中需要用ngTemplateOutletContext（后续版本简化为context），通过方括号绑定上下文对象；模板里的let-user="user"表示接收上下文里的user键对应的值，变量名可以自定义，比如let-usr="user"也没问题。

方法二：拆分结构，显式使用NgTemplateOutlet #

如果觉得第一种写法太紧凑，也可以把条件判断和模板渲染拆分，逻辑更清晰：

<!-- 有用户数据时渲染 -->
<div *ngIf="currentUser; else emptyBlock">
  <ng-container 
    *ngTemplateOutlet="userTemplate; context: {user: currentUser}"
  ></ng-container>
</div>

<!-- 无用户数据时渲染 -->
<ng-template #emptyBlock>
  <ng-container 
    *ngTemplateOutlet="emptyTemplate; context: {message: '暂无用户数据，请登录'}"
  ></ng-container>
</ng-template>

这种方式把*ngIf的条件判断和模板的上下文传递分开，后期维护起来更方便，尤其是模板逻辑复杂的时候。

额外小技巧：隐式上下文传递 #

如果你想简化模板里的变量接收，可以用$implicit作为上下文的键，这样模板里不用指定绑定名：

<ng-template #simpleUserTemplate let-user>
  <p>{{user.name}}</p>
</ng-template>

<ng-container 
  *ngTemplateOutlet="simpleUserTemplate; context: {$implicit: currentUser}"
></ng-container>

这里let-user会自动接收$implicit对应的值，写法更简洁。

亲测这几种方式在Angular 5里都能完美运行，你可以根据自己的代码风格选择合适的写法~

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