Angular2 TemplateRef 选择器

Question

在我的 datatable project 中，开发人员可以在 table 声明中声明用于 header 单元格和 body 单元格的模板。

<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>

在上面的示例中，第一个模板是 header 单元格模板，第二个模板是 body 单元格模板，顺序很重要。如果你只声明一个模板，它只会做body个单元格模板。您可以看到目前这是如何完成的 here。

我目前确实允许您通过 Input 将 TemplateRefs 传递给列指令，但这种方法没问题，但作为 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 但我不确定那是否是个好主意。

综上所述...我的问题是，我怎样才能完成命名选择器模板引用？

Answer 1

您可以将模板传递给输入

<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 的属性允许您访问模板和传递的值（可以有额外的@Inputs() 但与选择器匹配的是最容易使用的）。

Plunker example

Angular2 TemplateRef 选择器

Angular2 TemplateRef Selector

angularjs

angular2-template

angular