angularjs – Angular2 TemplateRef选择器

发布时间：2020-12-17 17:22:37 所属栏目：安全来源：网络整理

导读：在我的 datatable project中,开发人员能够在表声明中声明模板以用于标题单元格和正文单元格. datatable datatable-column name="Name" template let-column="column" Header: {{column.name}} /template template let-value="value" Hi: strong{{value}}/str

在我的 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是如何完成的.

我目前允许您通过输入将TemplateRefs传递给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,但我不确定这是不是一个好主意.

所以说…我的问题,我怎样才能完成命名的选择器模板引用？

解决方法

您可以将模板传递给输入

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

headerTemplate / columnTemplate的属性模板和标题/列允许您访问模板和传递的值(可以有额外的@Inputs(),但匹配选择器的最容易使用).

Plunker example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!