Angular2 TemplateRef Selector

Question

In meinem datatable project haben Entwickler die Möglichkeit, Vorlagen in der Tabellendeklaration für die Header-Zelle und die Körperzelle zu deklarieren.

<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 dem obigen Beispiel die erste Vorlage ist, die Kopfzelle Vorlage und die zweite ist die Körperzelle Vorlage und die Reihenfolge wichtig. Wenn Sie nur eine Vorlage deklarieren, wird nur die Körperzellenvorlage ausgeführt. Sie können sehen, wie dies derzeit durchgeführt wird here.

Ich kann derzeit TemplateRef s über eine Input an die Spalten-Richtlinie übergeben, aber dieser Ansatz ist in Ordnung, aber als API-Consumer, die deklarativen Vorlagen innerhalb der Komponentendefinition ist ein sauberer Ansatz.

Es ist auch erwähnenswert, dass es nicht möglich ist, Namen über etwas wie #body und #header zu tun, da Sie mehrere Spalten haben können, die die Namen nicht einzigartig machen.

Diese DSL ist nicht sehr intuitiv, weil es nicht sehr explizit ist, was ist und es hängt von der Reihenfolge ab. ng-content können Sie ein Selektor-Attribut setzen, ich frage mich, was der beste Weg, um so etwas mit Vorlagen zu erreichen wäre? So etwas wie:

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

Ich grub herum und versuchte, zu sehen, ob ihre möglich, die TemplateRef außer Kraft zu setzen, aber ich bin nicht sicher, das ist auch eine gute Idee.

Also mit all dem gesagt ... meine Frage, wie kann ich named selector template refs erreichen?

Answer 1

können Sie die Vorlagen

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

Update

Es ist auch möglich, Template-Variablen und Abfrage durch diese

<datatable> 
    <template let-column="column" #header> 
    header1 
    </template> 
    <template let-value="value" #column> 
    column1 
    </template> 

    <template let-value="value" #column> 
    column2 
    </template> 

an die Eingänge passieren hinzufügen

oder Anweisungen verwenden. Dieser Ansatz ermöglicht es

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

die Eigenschaften zusätzliche Informationen template und header/column von headerTemplate/columnTemplate können Sie die Vorlage für den Zugriff zu übergeben und einen übergebenen Wert (kann zusätzliche @Inputs() haben aber eine, die dem Selektor entspricht, ist am einfachsten zu verwenden).

Plunker example