ngTemplateOutletContext 上下文源未定义

Question

如果 angular < 4.3.6 不适用，该代码至少适用于 angular 2。

目前gradingKey对象在显示或编辑模板中是未定义的。

它在 getTemplate(gradingKey) 方法中不是未定义的。

gradingKey 被初始化为类字段

成分

@Input() set gradingKeyModel(gradingKeyModel: GradingKeyModel) {
    this.gradingKey = gradingKeyModel.gradingKey;
}

html

<ng-template [ngTemplateOutlet]="getTemplate(gradingKey)" 
             [ngTemplateOutletContext ]="{ $implicit: gradingKey }">
</ng-template>

<ng-template #displayTemplate let-gradingKey>
    <div>
        {{gradingKey}}       
    </div>
</ng-template>

<ng-template #editTemplate let-gradingKey>
    <div>
        {{gradingKey}}       
    </div>
</ng-template>

为什么模板中的 gradingKey 突然未定义？

使用 ngTemplateOutletContext 时，访问 ngOutletContext 的方式是否发生了变化？

Answer 1

ngTemplateOutlet需要包裹在ng-container. 您传递给ngTemplateOutletContext$implicit 变量（这很好），但尝试将其更改为显式变量，如下所示：

<ng-container [ngTemplateOutlet]="getTemplate(gradingKey)" 
              [ngTemplateOutletContext ]="{ gradingKey: gradingKey }">
</ng-container>

<ng-template #displayTemplate let-gradingKey="gradingKey">
    <div>
        {{gradingKey}}        
    </div>
</ng-template>