Multi Tabs ionic2

Question

我有一个ionic2应用程序，我想显示一个带有多个离子标签的离子标签。这个数组我想填充一个通用选项卡并传递一个数组。

我有这个组件<multi-tab></multi-tab>：

<ion-tabs tabsPlacement="top" class="multi-tabs">
  <ion-tab *ngFor="let tab of tabs" [tabTitle]="tab.title" [root]="tab.component"></ion-tab>
</ion-tabs>

这是ts文件：

[some imports here]
export class Tab {
    title: string;
    component: any;
};

const tabs = [{title: 'Snacks',  component: Snacks},
              {title: 'Drinks',  component: Drinks},
              {title: 'Frozen',  component: Frozen},
              {title: 'Custom',  component: customTab}];

@Component({
  selector: 'multi-tab',
  templateUrl: 'multitab.html'
})
export class multiTab {

  tabs : Array<Tab>;
  constructor(public modalCtrl: ModalController) {
      this.tabs = tabs;
  }
}

这是我的自定义标签组件：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items">
      <h2>{{item.title}}</h2>
      <p>Quantity: {{item.units}}</p>
      <ion-icon name="trash" item-right color="indigo100" (click)="onDelete(item)"></ion-icon>
    </ion-item>
  </ion-list>
  <ion-fab center bottom>
     <button ion-fab mini color="pink200" (click)="onAdd()"><ion-icon name="add"></ion-icon></button>
  </ion-fab>
</ion-content>

这是ts文件：

[some imports]
const CustomItems = [{
  'title': 'custom',
  'units': 1
}];

@Component({
  templateUrl: 'customTab.html'
})
export class customTab {

  items : Array<Item>;

  constructor(public modalCtrl: ModalController) {
    this.items = CustomItems;
  }

[some methods]

我想在所有标签中使用customTab并给它一个数组来初始化（items数组属性）但是我最接近的是出现这个错误：

Can't resolve all parameters for customTab(?)

当我尝试时：

constructor(public aux: Array<Item>) {
  this.items = aux;
}

Answer 1

有两个选项，要么使用属性rootParams（例如深度here解释），要么创建一个注入两个组件的服务。

两种解决方案都有其优点，第一种解决方案是使用为此目的明确引入的机制，因为ion-tabs是自定义组件，您不能使用输入和输出。第二种解决方案是在角度应用程序（如用户会话）中共享数据的主要机制，但对于这项小任务来说似乎有些过分。

在此commit中有一个使用rootParams的示例。