Angular let- 不设置局部变量

Question

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

<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-template。 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>

Angular let- 不设置局部变量

Angular let- doesn't set a local variable

angular-template

angular-ng-if

angular-directive

angular