Angular2コンポーネントをリストに格納し、各コンポーネントをテンプレートにレンダリングします

Question

私はカードのリストを持っています（ionic2を使用しています）。各カードはさまざまなタイプの1つです。私はそれ自身のコンポーネントに各カードをカプセル化し、それらをリストに格納し、それらをテンプレートにレンダリングすることを望んでいました。 {{コンポーネントは}}コンポーネントではなく、オブジェクト参照のレンダリングされたテンプレートであるので

<ion-card *ngFor="#component of items"> 

    {{component}} 

    </ion-card> 

ようなテンプレートと

import {Injectable} from 'angular2/core'; 
import {Page} from 'ionic-angular'; 

@Page({ 
    templateUrl: 'build/pages/search/search.html' 
}) 
export class SearchPage { 
    items: Component[]; 

    constructor() { 
     this.initializeItems(); 
    } 

    initializeItems() { 
     this.items = [ 
     new MyComponent1(), 
     new MyComponent2(), 
     new MyComponent3() 
     ]; 
    } 
} 

：コードは次のようになります。

どうすればよいですか？この全部が間違っていますか？もしそうなら、あなたは何をお勧めしますか？

EDIT：

私は単純にレンダリングするために、異なるデータ型を格納考えられてきたが、これは私には適切なソリューションのように感じることはありません。私は、分離のために各カードをそれ自身のクラス/コンポーネントにカプセル化することができるという考えを持っています。私は自分の検索ページに、それぞれの異なるカードタイプをどう扱うかを知っておく必要はありません。

Answer 1

質問の例を確認してください。あなたがしたいですか正確に何http://plnkr.co/edit/IcNRAdrQxD7ndYA9rKlA?p=preview

• 使用サブコンポーネント、：あなたが追加する、コンポーネント間のより多くのデータ交換が必要な場合は@Input

とサブコンポーネントに親コンポーネントからeach card in its own class/component for separation

パス引数サービス。サービスはInjectableとシングルトンであるためです。