在我的datatable project中,开发人员可以在表声明中声明模板,以用于标题单元格和正文单元格。
<datatable>
<datatable-column name="Name">
<template let-column="column">
Header: {{column.name}}
</template>
<template let-value="value">
Hi: <strong>{{value}}</strong>
</template>
</datatable-column>
<datatable-column name="Age">
<datatable-body-template let-value="value">
I'm: <strong>{{value}}</strong> old
</datatable-body-template>
</datatable-column>
</datatable>
在上面的例子中,第一个模板是标题单元格模板,第二个模板是主体单元格模板,顺序很重要。如果您只声明一个模板,它将只执行体细胞模板。您现在可以看到这是如何完成的here。
我目前允许您通过TemplateRef
将Input
传递给column指令,但这种方法还可以,但作为API使用者,组件定义中的声明性模板是一种更简洁的方法。
值得注意的是,它不可能通过#body
和#header
之类的命名进行命名,因为您可以使用多个列来使名称不唯一。
这个DSL不是非常直观,因为它不是非常明确的,它取决于顺序。 ng-content
允许你输入一个选择器属性,我想知道用模板完成类似事情的最佳方法是什么?如下所示:
<datatable>
<datatable-column name="Name">
<datatable-header-template let-column="column">
Header: {{column.name}}
</datatable-header-template>
<datatable-body-template let-value="value">
Hi: <strong>{{value}}</strong>
</datatable-body-template>
</datatable-column>
</datatable>
我正在四处寻找是否有可能覆盖TemplateRef
,但我不确定这是不是一个好主意。
所以说了......我的问题,我怎样才能完成命名的选择器模板参考?
答案 0 :(得分:7)
您可以将模板传递给输入
<template #header let-column="column">
Header: {{column.name}}
</template>
<template #body let-value="value">
Hi: <strong>{{value}}</strong>
</template>
<datatable>
<datatable-column name="Name" [header]="header" [column]="body"></datatable-column>
</datatable>
<强>更新强>
也可以通过这些
添加模板变量和查询<datatable>
<template let-column="column" #header>
header1
</template>
<template let-value="value" #column>
column1
</template>
<template let-value="value" #column>
column2
</template>
@ContentChildren('header', {read: TemplateRef}) headerTemplates:QueryList<TemplateRef>;
@ContentChildren('column', {read: TemplateRef}) columnTemplates:QueryList<TemplateRef>;
或使用指令。此方法允许传递其他信息
@Directive({
selector: '[header]';
})
class HeaderTemplate {
constructor(private template:TemplateRef) {};
@Input() header:String;
}
@Directive({
selector: '[column]';
})
class ColumnTemplate {
constructor(private template:TemplateRef) {};
@Input() column:String;
}
<datatable>
<template let-column="column" header="1">
header1
</template>
<template let-value="value" column="1">
column1
</template>
<template let-value="value" column="2">
column2
</template>
</datatable>
@ContentChildren(HeaderTemplate) headerTemplates:QueryList<HeaderTemplate>;
@ContentChildren(ColumnTemplate) columnTemplates:QueryList<ColumnTemplate>;
template
/ header
的属性column
和headerTemplate
/ columnTemplate
允许您访问模板和传递的值(可以有额外的{{ 1}}但是匹配选择器的一个最容易使用)。