将不同的上下文传递给 ngIf答案

【问题标题】：Pass different context to ngIf将不同的上下文传递给 ngIf
【发布时间】：2018-01-16 03:34:22
【问题描述】：

以下面的模板为例。我使用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>

【问题讨论】：

我不太明白投票结束的原因。如果您对这个问题感到困惑，请您提供原因以便我澄清一下吗？
可能不是 if/else 的设计目的。您可以获得的关闭可能是将您的模板嵌套在 ngIf 中：plnkr.co/edit/SIu6HBOOB8ofe3exA7lG?p=preview 但这仍然是我不鼓励的。为什么不使用组件？
所以基本上你想在外部ngIf 中创建一个变量user 并在内部ngIf 条件中使用它？
不适用于内部条件，模板userTmpl 和emptyTmpl 的上下文
这也是我所看到的。您是否同意按照我在答案中概述的那样提出允许通过微语法传递上下文的功能有一些好处？

标签： angular

【解决方案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>

【讨论】：

您的答案会起作用，但略有不同，因为它不使用*ngIf
@cgatian 是的，你是对的。我开始尝试使用*ngIf 寻找解决方案，但不知何故得意忘形了……对不起！我已经修改了我的 stackblitz 以根据 *ngIf 表达式设置上下文 based。这样至少可以传递不同的数据。不幸的是，它仍然不像您的理想示例那样工作。
没关系，我刚刚看到@Edmundo Rodrigues 提出了同样的建议。

【解决方案2】：

看看NgTemplateOutlet。

类似的东西会起作用：

<ng-container *ngIf="user$ | async as user">
    <ng-container *ngIf="showUser">
      <ng-container *ngTemplateOutlet="userTmpl; context: { $implicit: user }"></ng-container>
    </ng-container>
</ng-container>

<ng-template #userTmpl let-user>
  {{ user | json }
</ng-template>

【讨论】：

我认为没有解决方案，因为不可能同时在同一个元素中使用两个结构指令。
虽然它不是结构性的东西。 ngIf 可以使用微语法来提供上下文，我只是在源代码中没有看到它。
我明白了。好吧，看看源代码，目前肯定没有办法——而且我认为将来不会有。
您可以改用组件，或者创建一个自定义结构指令来为您完成这项工作。

【解决方案3】：

可以！

您的 $implicit 是来自 ngif 的 x 和 x 是 user（在您的情况下）

因为this._context.$implicit = this._context.ngIf = condition

检查这个例子：

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <div *ngIf="user;then content else other_content">here is ignored</div>

    <ng-template #content let-x="$implicit">{{x|json}}content here...</ng-template>
    <ng-template #other_content>other content here...</ng-template>
  `,
  styles: []
})
export class AppComponent {
  title = 'app';
  user = { name: 'wizardnet972' };
}

【讨论】：

在我的例子中，ngIf 是showUser，这不是我想在模板中显示的内容。 user 是我要传递给模板的内容，showUser 在 ngIf 中使用
在问题末尾查看我的理想示例。上下文不同于 ngIf 条件。

【解决方案4】：

您可以通过这种方式实现：

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

【讨论】：