如何擴展ionic2選項卡組件？

基於Angular2的Ionic2入門，我目前正試圖擴展基本選項卡組件以添加額外的輸入。重點是按屬性將模型列表分類爲選項卡。我的階級是這樣的：如何擴展ionic2選項卡組件？

import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer} from 'angular2/angular2'; 
import {IonicApp, Config, Keyboard, NavController, ViewController, Tabs, Tab} from 'ionic/ionic'; 

@Component({ 
    selector: 'list-tab', 
    inputs: [ 
     'root', 
     'tabTitle', 
     'tabIcon' 
    ], 
    host: { 
     '[class.show-tab]': 'isSelected', 
     '[attr.id]': '_panelId', 
     '[attr.aria-labelledby]': '_btnId', 
     'role': 'tabpanel' 
    }, 
    template: '<template #contents></template>' 
}) 
export class ListTab extends Tab { 
    constructor(
     @Host() parentTabs: Tabs, 
     app: IonicApp, 
     config: Config, 
     keyboard: Keyboard, 
     elementRef: ElementRef, 
     compiler: Compiler, 
     loader: DynamicComponentLoader, 
     viewManager: AppViewManager, 
     zone: NgZone, 
     renderer: Renderer 
    ) { 
     super(parentTabs, app, config, keyboard, elementRef, compiler, loader, viewManager, zone, renderer); 
    } 
}

我再嘗試使用它作爲一個正常的標籤：

<ion-tabs> 
    <list-tab *ng-for="#tab of tabs" tab-title="{{tab.title}}" tab-icon="{{tab.icon}}" [root]="tab.component"></list-tab> 
</ion-tabs>

但它顯示了以下錯誤：

Error: Cannot resolve all parameters for ListTab(Tabs @Host() @Host(), IonicApp, Config, ?, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer). Make sure they all have valid type or annotations. 
    at NoAnnotationError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:26209:24) 
    at new NoAnnotationError (http://localhost:8100/build/js/app.bundle.js:27069:17) 
    at _extractToken (http://localhost:8100/build/js/app.bundle.js:26183:16) 
    at http://localhost:8100/build/js/app.bundle.js:26135:46 
    at Array.map (native) 
    at Array.map (http://localhost:8100/build/js/app.bundle.js:1158:15) 
    at _dependenciesFor (http://localhost:8100/build/js/app.bundle.js:26135:20) 
    at resolveFactory (http://localhost:8100/build/js/app.bundle.js:26015:25) 
    at Object.resolveProvider (http://localhost:8100/build/js/app.bundle.js:26039:67) 
    at Function.DirectiveProvider.createFromProvider (http://localhost:8100/build/js/app.bundle.js:36482:30)

我已經嘗試了不同的如何讓鍵盤正確導入，因爲它似乎無法識別它的註釋，但似乎沒有任何更正錯誤。這是一個框架錯誤，因爲我們在alpha中，或者我做錯了什麼，這不會令人驚訝嗎？

感謝

來源

2015-11-27 Dorkside

試試我的代碼，適用於2.0.0 beta.3使用

import {Tab, Config} from "ionic-angular"; 
import {Keyboard} from "ionic-angular/util/keyboard"; 
import {Component, Inject, forwardRef, ElementRef, Compiler, AppViewManager, NgZone, Renderer, ViewEncapsulation} from 'angular2/core'; 
import {ShiftingTabs} from './tabs'; 
import {IonicApp} from "ionic-angular"; 

@Component({ 
    selector: 'shifting-tab', 
    inputs: [ 
     'root', 
     'tabTitle', 
     'tabIcon' 
    ], 
    host: { 
    '[class.show-tab]': 'isSelected', 
    '[attr.id]': '_panelId', 
    '[attr.aria-labelledby]': '_btnId', 
    'role': 'tabpanel' 
    }, 
    template: '<div #contents></div>', 
    encapsulation: ViewEncapsulation.None 
}) 
export class ShiftingTab extends Tab { 
    constructor(
    @Inject(forwardRef(() => ShiftingTabs)) parentTabs: ShiftingTabs, 
    app: IonicApp, 
    config: Config, 
    keyboard: Keyboard, 
    elementRef: ElementRef, 
    compiler: Compiler, 
    viewManager: AppViewManager, 
    zone: NgZone, 
    renderer: Renderer 
) { 
     super(
     parentTabs, app, config, keyboard, elementRef, compiler, 
     viewManager, zone, renderer 
    ); 
    } 
}

例如：

<ion-tabs tabbarPlacement="top"> 
    <shifting-tab [root]="tab1Root" tabTitle="Test1"></shifting-tab> 
</ion-tabs>

來源

2016-04-11 12:45:04 Gajush

如何擴展ionic2選項卡組件？

回答

相關問題