Angular2 TemplateRef選擇器

Question

在我的數據表項目中 ，開發人員能夠在表聲明中聲明模板，以用於標題單元格和正文單元格。

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

在上面的例子中，第一個模板是標題單元格模板，第二個模板是主體單元格模板，順序很重要。 如果您只聲明一個模板，它將只執行體細胞模板。 你可以看到這是如何正在做目前這里 。

我目前允許您通過Input將TemplateRef傳遞給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但我不確定這是不是一個好主意。

所以說...我的問題，我怎樣才能完成命名的選擇器模板引用？

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

headerTemplate / columnTemplate的屬性template和header / column允許您訪問模板和傳遞的值（可以有額外的@Inputs()但匹配選擇器的最容易使用）。

Plunker的例子