2016-11-21 74 views
1

我有一個ionic2應用程序,我想顯示一個離子選項卡和一個數組中的多個離子選項卡。這個數組我想填充一個通用的選項卡並將其傳遞給一個數組。Multi Tabs 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,並給它一個數組初始化(項目數組屬性),但最近我曾經被是有這個錯誤:

Can't resolve all parameters for customTab(?)

當我嘗試:

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

回答

1

有2個選項,無論是使用屬性rootParams(在例如深度here解釋)或創建一個在兩個組件噴射的服務。

這兩種解決方案都有其優點,第一種方法是使用爲此目的明確引入的機制,因爲離子選項卡是自定義組件,您不能使用輸入和輸出。第二個解決方案是在角度應用程序(如用戶會話)中共享數據的主要機制,但對於這個小任務看起來可能過於矯枉過正。

在這個commit中有一個使用rootParams的例子。

+0

謝謝rootParams完美地工作@nhpatt :) –