Question

采用以下模板示例。我使用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>

Answer 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>

Answer 3

是的，你可以！

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

因为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' };
}

Answer 4

您可以通过以下方式实现这一目标：

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

将不同的上下文传递给ngIf

4 个答案: