データバインディングを持つコンポーネントでディレクティブを使用するにはどうすればよいですか？

Question

私は基本的にコンポーネントを入れ子にしようとしています。私が持っているコードで説明するのが簡単になると思います。

基本的に私は2つのコンポーネントを持っています、私は特定の方法でもう一方のコンポーネントを使用したいです。ここで私は、彼らが設定した方法は次のとおりです。

---

test.component.ts：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'test', 
    templateUrl: 'partials/test.html' 
}) 
export class TestComponent { 
    constructor() {} 
} 

---

another.component.ts：

import { Component } from '@angular/core'; 
import { TestComponent } from './test.component'; 

interface Circle { 
    show: boolean, 
    data: any 
} 

@Component({ 
    selector: 'another', 
    directives: [ TestComponent ], 
    templateUrl: '/partials/another.html' 
}) 
export class AnotherComponent { 
    circles: Circle[] = []; 

    constructor() { 
     let testElement = document.createElement('test'), 
      defaultCircles = [ 
       { show: true, data: testElement } 
      ]; 

     this.circles = defaultCircles; 
    } 
} 

---

partials/another.htmlは：

<ul> 
    <li *ngFor="let circle of circles; let i = index"> 
     {{circle.data}} <!-- this just shows [object HTMLElement] --> 
    </li> 
</ul> 

ディレクティブの内容を表示するにはどうすればよいですか？私はdata: testElementをdata: '<test></test>'に置き換えようとしましたが、それでも動作しません、それはちょうどテキスト<test></test>を示しています。

Answer 1

私はギュンターの答えにコメントと一緒に、以下のことになった、と正確に何が必要ありません。この主旨を思い付きました。

https://gist.github.com/wphax/14570328483baff3d8f79eab675704f2

Answer 2

これはうまくいくかもしれない：

<ul> 
    <li *ngFor="let circle of circles; let i = index" [innerHTML]="circle.data"> 
    </li> 
</ul>