親テンプレート内の子コンテンツをレンダリングする

Question

私はエクササイズとしてAngular 5でステッパーを作成しようとしていますが、これについてどうやってどうやって進んでいるのか完全にわかりません。基本的には、Xステップのステッパーを作成し、各ステップのコンテンツをレンダリングできるようにしたいと考えています。現在、各ステップは要素間のテキストの代わりに[オブジェクトオブジェクト]としてレンダリングされています。ステップの内容を親テンプレートにどのようにレンダリングするのですか？ここで

は私のコンポーネントです：

import { Component, ContentChildren, Input, QueryList } from '@angular/core'; 

@Component({ 
    selector: 'step', 
    template: `<ng-content></ng-content>` 
}) 
export class Step { 
    constructor() { } 
} 

@Component({ 
    selector: 'stepper', 
    template: ` 
    <ul class="stepper stepper-horizontal"> 
     <li *ngFor="let step of steps; index as i" 
     [ngClass]="{ 
      active: idx === (i + 1), 
      completed: idx > (i + 1) 
     }"> 
     <a> 
      <span class="circle"> 
      {{i + 1}} 
      </span> 
      <span class="label"> 
      {{ step }} 
      </span> 
     </a> 
     </li> 
    </ul> 
    ` 
}) 
export class Stepper { 
    @ContentChildren(Step) 
    readonly steps: QueryList<Step>; 

    private idx: number = 1; 

    constructor() { } 

    next() { 
    if (this.idx < this.steps.length) this.idx++; 
    } 

    prev() { 
    if (this.idx > 1) this.idx--; 
    } 
} 

そして、これは私が書きたいテンプレートの例である：よりエレガントな答えがある

<stepper> 
    <step>Step 1</step> 
    <step>Step 2</step> 
    <step>Step 3</step> 
</stepper> 

Answer 1

わからない場合は、これは働いていました：

@Directive({ selector: 'step' }) 
export class Step { 
    constructor (private element: ElementRef) { } 

    get text() { return this.element.nativeElement.innerText; } 
} 

ステッカーで{{step.text}}と表示されます。私が知りたいより良い方法があれば！