Передайте другой контекст в ngIf

Возьмем следующий пример шаблона. Im создание контекста шаблона пользователя с as синтаксисом и хотел бы передать этот контекст в userTmpl. Из того, что я могу сказать, нет способа передать контекст вне того, что используется условием ngIf. Что в этом примере является свойством showUser.

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

Как передать переменную ввода шаблона user во вложенный шаблонRef?

Глядя на источник, директива ngIf выглядит так, что устанавливает контекст в состояние ngIf. Я не знаю, как можно переопределить эту переменную контекста, которая используется в шаблонах

Что-то вроде этого было бы идеальным, но не видя, как это сделать.

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

Ответ 1

Взгляните на 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>

Ответ 2

Да, ты можешь!

Ваш $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' };
}

Ответ 3

Это можно сделать так:

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

Ответ 4

Есть два очень похожих способа решить эту проблему. Я создал 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>