角度：将变量传递给else块

Question

我有一些数据this.data={type:'test', payload:"ok"}

如果data.type=='test'，我想显示#testBlock，所以我使用if＆else。

而且我想在#testBlock中创建一个局部变量来设置item=data.payload

<ng-container *ngIf="data.type!='test'; else testBlock; let data2"></ng-container>

<ng-template #testBlock let-item="data.payload"  > 
  <b> test block </b><br />
  data: {{data | json}} <hr /> <!-- works, but I want to set item=data.payload -->
  data2: {{data2 | json}} <hr /> <!-- doesn't work -->
  item: {{item | json}} <!-- doesn't work -->

  </ng-template>

Demo

Answer 1

抱歉，但是ngIfElse指令（用于呈现else模板的指令）没有任何其他参数。

模板引用已创建，并且作用域为父view上下文。

例如；

<ng-container *ngFor="let num of [1,2,3]">
   <ng-container *ngIf="false; else example"></ng-container>
   <ng-template #example let-value="num">
      {{value}}
   </ng-template>
</ng-container>

在上面的示例中，ngFor创建3个不同的模板，每个模板都包含自己的#example内部模板。对于每种情况，num的不同值将传递给let-value。内部ngIf对else模板使用唯一引用。因此，此示例显示了如何定义呈现模板时将使用的不同上下文值。

另一个例子；

<ng-container *ngFor="let num of [1,2,3]">
   <ng-container *ngIf="false; else example"></ng-container>
</ng-container>
<ng-template #example let-value="num">
   {{value}}
</ng-template>

在上面的示例中，#example在外部上下文中，并且模板只有一个实例。将有3个不同的*ngIf使用same引用。模板的num值将为undefined。

在以上两个示例中，#example模板均被渲染3次。

第一个示例呈现了模板的3个唯一实例，每个实例具有由*ngFor提供的自己的上下文，第二个示例使用相同的上下文（相同的上下文（顶部上下文是组件的上下文），呈现了3次相同的模板。

[当您想传递不同的let-*上下文值时，重要的是要知道要在哪个上下文中定义模板。

最常见的用例是使用async管道。

例如；

<ng-container *ngIf="data$ | async as data">
   <ng-container *ngIf="false; else example"></ng-container>
   <ng-template #example let-value="data">
      {{value}}
   </ng-template>
</ng-container>

在上面的示例中，data$ | async as data在名为data的新上下文中创建一个新变量，并且由于<ng-template>在此上下文中，因此创建了一个新模板。然后从新上下文中接收let-value。

这是从模板将可观察的值作为上下文参数传递给data的唯一方法。