Question

我遇到了ng-template问题。

我们正在通过ngTemplateOutletContext传递一些参数，如下表所示。我们为单元格使用不同的渲染器，具体取决于其中包含的数据类型。请注意cellvalue参数，因为它正是我所需要的。

<ng-container *ngIf="useCellRenderer(column, row)">
   <ng-template [ngTemplateOutlet]="column.renderer.templateref" [ngTemplateOutletContext]="{ cellvalue: row[column.attr], rowvalue:row }">
   </ng-template>
</ng-container>

负责渲染的组件的模板如下：

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

模板能够访问cellvalue参数并正确调用函数，但是我想从组件的TS中访问相同的参数，并且似乎无法做到这一点。

到目前为止，我已经尝试了以下代码段

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

  ngAfterViewInit() {
    console.log('ngAfterViewInit', this.templateref.elementRef);
  }

但是在控制台中找不到单元格值

谢谢！

Answer 1

所以@SebOlens用他的话引导了我解决问题。我结束了使用exportAs创建指令的过程。该指令如下：

TS

@Directive({ selector: '[exposeVariable]', exportAs: 'exposed' })
export class ExposeVariableDirective {
  @Input() variablesToExpose: any;
  }
}

可以通过以下方式在模板中使用它：

HTML

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  <div exposeVariable [variablesToExpose]="{cellValue: cellvalue}" #exposedRef="exposed">
    {{ getTraslateValue(cellvalue)}}
  </div>
</ng-template>

并且可以从组件访问单元格值：

TS

@ViewChild('exposedRef') public directiveExposed: any;

就我而言，指令在组件的AfterViewInit之后初始化，因此，如果您尝试初始化某些内容，则必须观察ViewChild变量的值，或者就我而言，我是使用ngIf和模板中的暴露变量，因此我可以使用新组件中的钩子。

再次感谢@SebOlens：）

Answer 2

好吧，这不是一个答案，只是一个建议，因此，如果它不起作用，请不要忽略它。

您尝试过类似的东西吗？

html

<ng-template #cellValue="cellvalue" let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

ts

@ViewChild('cellValue') public cellValue: any;

我不确定#cellValue="cellvalue"之类的构造是否只能在其装饰器中使用exportAs描述的指令才能工作

这行不通：

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

因为它引用模板本身而不是dom的生成部分。也许尝试引用模板生成的dom部分。

在组件内部访问模板变量

2 个答案: