カスタム構造ディレクティブを作成する

Question

私は1週間前にAngular2と最新のangular4を学び始めました。今はその中に何が入っているかを示すカスタム構造ディレクティブを作成する必要があります。

説明：私は、文字列のペアの配列の要素を持っているのは、（配列がから来て、これは結果https://ibb.co/i23Dxa

ある配列のタイトルのn個の要素の第1の要素と第2の説明 を呼びましょうバックエンドは、私は私が私が作成する必要があり、構造ディレクティブを呼び出す場合、私はそれは私がその呼び出し

例の下に書きますかを示していることを望む、

今）モック配列ファイルを介して、それをシミュレートしています：

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

これは今だけのために、私はこれを持って、私はタグの間に書いたボタンをレンダリングする必要があります。

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

誰かが良く進めるための方法を私に説明してもらえますか？どうもありがとう。

Answer 1

私はコンポーネントは次のようになります...

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

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

grid.component.htmlは別のコンポーネントで

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

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

と使用方法のように見える

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