angular - 将不同的上下文传递给 ngIf

Question

以下面的模板为例。 Im 使用 as 语法创建用户的模板上下文，并希望将该上下文传递到 userTmpl。据我所知，没有办法在 ngIf 条件使用的内容之外传递上下文。在此示例中，它是 showUser 属性。

<ng-container *ngIf="user$ | async as user">
    <ng-container *ngIf="showUser; then userTmpl; else emptyTmpl"></ngcontainer>
</ng-container>

如何将 user 模板输入变量传递给嵌套的 templateRef？

Looking at the source , ngIf 指令看起来像是将上下文设置为 ngIf 的条件。我不知道有什么方法可以基本上覆盖模板中使用的上下文变量

像这样的东西是理想的，但没有找到实现它的方法。

<ng-container *ngIf="showUser; then userTmpl; else emptyTmpl; context: user"></ngcontainer>

Answer 1

有两种非常相似的方法可以解决这个问题。我创建了一个 stackblitz使用两种解决方案(使用 Angular 6.0.1 和最新的 6.1.8 进行测试)根据条件将数据传递到不同的模板。

版本#1

    <ng-container *ngTemplateOutlet="showUser ? userTmpl : emptyTmpl; context: { $implicit: user }">
    </ng-container>

    <ng-template #userTmpl let-user>
        ...
    </ng-template>

    <ng-template #emptyTmpl let-user>
        ...
    </ng-template>

版本#2

另一种可能性是使用@Ben 的解决方案，但是您必须省略 let-user 部分(并修复他的代码中的结束标记)。这样代码看起来像这样。

    <ng-container *ngTemplateOutlet="showUser ? userTmpl : emptyTmpl; context: user">
    </ng-container>

    <ng-template #userTmpl>
        ...
    </ng-template>

    <ng-template #emptyTmpl>
        ...
    </ng-template>