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-不设置局部变量

1 个答案: