javascript - 访问组件内的模板变量
问题描述
我遇到了 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);
}
但是在console.log中找不到cellvalue
提前致谢!
解决方案
所以@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 :)
推荐阅读
- c - 演员表的 gclib 问题
- hibernate - 休眠条件查询需要时间从数据库表中获取记录
- macos - Mac上的Docker ...无法访问本地网络上的任何内容
- reactjs - 测试重定向页面
- debugging - Using Visual Studion Code to connect to the gdb-server of the OP-TEE which is running in the QEMU
- javascript - 根据分数创建在测验结束时弹出的消息
- php - PHP - 从关联数组中删除并返回一个元素
- c# - WPF中的绑定数组
- python - pandas to_sql insert ignore
- dyndns - Dyndns2 protocol specification?