如何通过 *ngIf 将数据传递到模板参数?

Question

我们可以[1,2,3]传递给模板A的参数p吗？ 并将[4,5,6]传递给模板B的参数q*ngIf？

<div *ngIf="true;then A;else B"></div>
<ng-template #A let-p>p: {{p}}</ng-template>
<ng-template #B let-q>q: {{q}}</ng-template>

这是我的尝试，但它不起作用。

<div *ngIf="true;then A; context:{$implicit:[1,2,3]};else B;context:{$implicit:[4,5,6]}"></div>
<ng-template #A let-p>p: {{p}}</ng-template>
<ng-template #B let-q>q: {{q}}</ng-template>

Answer 1

我认为使用单三元运算符很难满足您的要求。

方法1：使用[ngSwitch]+[ngTemplateOutlet]

<div [ngSwitch]="true">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="A"
[ngTemplateOutletContext]="{ $implicit: [1, 2, 3] }"
>
</ng-container>
<ng-container
*ngSwitchDefault
[ngTemplateOutlet]="B"
[ngTemplateOutletContext]="{ $implicit: [4, 5, 6] }"
>
</ng-container>
</div>

---

方法 2：具有[ngTemplateOutlet]和多个三元运算符

<div>
<ng-container
[ngTemplateOutlet]="true ? A : B"
[ngTemplateOutletContext]="{ $implicit: true ? [1, 2, 3] : [4, 5, 6] }"
>
</ng-container>
</div>

Demo Apprach 1 & 2 @ StackBlitz