Comment étendre le composant de l'onglet ionic2?

Question

Démarrage sur Ionic2 qui est basé sur Angular2 et j'essaie actuellement d'étendre le composant de l'onglet de base pour ajouter une entrée supplémentaire. Le but est de trier une liste de modèles en onglets par un attribut. Ma classe est la suivante:

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); 
    } 
} 

J'essaie ensuite l'utiliser comme un onglet normal:

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

Mais il affiche l'erreur suivante:

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) 

J'ai essayé différentes façons d'importer correctement le clavier car il semble qu'il ne reconnaisse pas son annotation, mais rien ne semble corriger l'erreur. Est-ce un bug de framework qui ne serait pas surprenant puisque nous sommes en alpha, ou est-ce que je fais quelque chose de mal?

Merci

Answer 1

Essayez mon code, fonctionne sur 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 
    ); 
    } 
} 

exemple d'utilisation:

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