将Angular2组件存储在列表中，并在模板中渲染每个组件

所以我有一张卡片列表（使用ionic2），每张卡片可以是多种不同类型中的一种。我希望将每张卡封装在自己的组件中，将它们存储在列表中，并在模板中呈现它们。代码如下所示：

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()
        ];
    }
}

用这样的模板

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

    {{component}}

  </ion-card>

{{component}}

其中{component}}是组件的呈现模板，而不是对象引用

我该怎么做？我对这整件事的看法是错的吗？如果是，你有什么建议

编辑：

---

我曾考虑过简单地存储要呈现的不同数据类型，但我觉得这不是正确的解决方案。我的想法是能够将每一张卡封装在自己的类/组件中进行分离。我不想让我的搜索页面知道如何处理每种不同的卡片类型。

检查我为您的问题制作的示例

• 使用子组件，它完全按照您的要求执行：

  每个卡在其自己的类/组件中进行分离

• 使用

  @Input

如果您需要在组件之间进行更多数据交换，请添加服务。因为服务是可注入的和单例的。

请参阅。在

动态表单question.component.html

中，您将看到ngSwitch。我认为在NGSwitch中，您可以放置要显示的组件的硬编码列表。我目前正在寻找解决办法，巫婆将有助于避免ngSwitch的方式，你想要的