Multi Tabs ionic2 - tabs

Question

i have an ionic2 app and i want to display an ion-tabs with multiple ion-tab from an array. This array i want to populate with a generic tab and pass it an array.
I have this component <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>
And this is the ts file:
[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;
}
}
This is my custom tab component:
<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>
And this the ts file:
[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]
I want to use in all tabs the customTab and give it an array to initialize (the items array property) But the closest I've ever been is having this error:
Can't resolve all parameters for customTab(?)
when i tried:
constructor(public aux: Array<Item>) {
this.items = aux;
}

Answer 1

There are 2 options, either use the property rootParams (explained in depth here for example) or create a service that is injected in both components.
Both solutions have their merits, the first one is using the mechanism introduced explicitly for that purpose because ion-tabs are custom components and you can't use inputs and outputs. The second solution is the main mechanism of sharing data in angular applications (like a user session) but can seem as overkill for this small task.
There is an example of using rootParams in this commit.