Question

所以我有一张卡片列表（使用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}}是组件的呈现模板，而不是对象引用。

我该怎么做？我接近这整件事是错的吗？如果是的话，你有什么建议？

编辑：

我考虑过简单地存储要渲染的不同数据类型，但这对我来说不是正确的解决方案。我认为能够将每张卡封装在自己的类/组件中进行分离。我不希望我的搜索页面必须知道如何处理每种不同的卡片类型。

Answer 1

检查我为您的问题所做的示例。 http://plnkr.co/edit/IcNRAdrQxD7ndYA9rKlA?p=preview

使用子组件，它完全符合您的要求：each card in its own class/component for separation
使用@Input

如果组件之间需要更多数据交换，则添加服务。因为服务是Injectable和单身。

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

1 个答案: