Angular let- 不设置局部变量

Question

我正在尝试在<ng-template> 中设置一个局部变量，但似乎let- 不起作用。

Demo

<ng-container *ngIf="data as d">
<ng-container *ngIf="false; else testBlock"></ng-container> 
<ng-template #testBlock let-x="d">
  data:{{data | json}} <br />
  d:{{d | json}} <br />
  x:{{x | json}} <br /> <!-- let-x didn't work !! -->
</ng-template>
</ng-container>

备注

data 对象比这个例子复杂，所以我需要设置一个局部变量为数据的深层属性，以避免重复访问它。

即：使用{{x.something}} 而不是{{data.payload.prob1.prob2.something}}

Answer 1

您需要一个 ngTemplateOutlet 上下文来将变量传递给 ng 模板。 ngTemplateOutletContext 应该是一个对象，对象的键将可用于本地模板 let 声明的绑定。

<ng-container
  [ngTemplateOutlet]="false ? originalBlock : testBlock" 
  [ngTemplateOutletContext]="{data: data}"> 
</ng-container>

<ng-template #originalBlock let-d="data">
  data:{{data | json}} <br />
  d:{{d | json}} <br />
</ng-template>

<ng-template #testBlock let-x="data">
  data:{{data | json}} <br />
  x:{{x | json}} <br />
</ng-template>