Angular2 Template Selection

Question

In my datatable project, developers can declare templates in the table declaration that will be used for the header cell and body cell.

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

in the above example, the first template is the header cell template, and the second is the body cell template and order. If you only declare a single template, it will only make a body cell template. You can see how this is currently being done here .

Currently, I allow you to pass TemplateRefusing Inputa column directive, but this approach is approved, but as a consumer of the API, declarative templates inside the component definition are a cleaner approach.

, - #body #header, , .

DSL , , . ng-content selector, , - ? - :

<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 of headerTemplate/columnTemplate ( @Inputs(), , , ).