Création d'une directive structurelle personnalisée

Question

J'ai commencé à apprendre Angular2 et le tout nouveau angular4 il y a une semaine, et maintenant je dois créer une directive structurelle personnalisée qui montre ce qu'il y a dedans.

Explication: J'ai un élément d'un tableau d'une paire de chaîne Appelons le premier élément des n éléments du titre de tableau et la deuxième description cela est le résultat https://ibb.co/i23Dxa

(le tableau vient de un back-end, je le simuler par un fichier de tableau fictif)

maintenant, si je l'appelle la directive structurelle que je dois créer, je veux qu'il montre ce que je vais écrire sous cet appel

exemple :

<ng-template aulos-configuration-item-toolbar> 
    <button (click)="click()">just click</button> 
</ng-template> 

cela ne devrait rendre le bouton que j'ai écrit entre les balises, pour l'instant, j'ai ceci:

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core"; 

@Directive({ 
    selector: "[aulos-configuration-item-toolbar]", 

}) 

export class AulosConfigurationItemToolbar { 
    public templateRef: TemplateRef<any>; 

    constructor(templateRef: TemplateRef<any>) { 
     this.templateRef = templateRef; 
    } 
} 

Quelqu'un pourrait-il me expliquer mieux la façon de procéder? Merci beaucoup.

Answer 1

laissez-moi expliquer Component ressemble à ceci ...

export class GridOptionsComponent { } 
@Directive({ selector: 'grid-options' }) 

@Component({ 
    selector: 'my-grid', 
    moduleId: module.id, 
    templateUrl: './grid.component.html' 
}) 
export class GridComponent { 
    .... 
    .... 
} 

grid.component.html ressemble

<div class="col-md-3"> 
    <div> some more html elements, components </div> 

    <ng-content select="grid-options"></ng-content> 
</div> 

et de l'utilisation dans un autre composant devrait être

<my-grid> 
    <grid-options> 
     <button >Add</button> 
     <button >View</button> 
    </grid-options> 
</my-grid>