Как расширить компонент вкладки ionic2?

Question

Начало работы с Ionic2, основанного на Angular2, и в настоящее время я пытаюсь расширить компонент базовой вкладки, чтобы добавить дополнительный ввод. Дело в том, чтобы отсортировать список моделей по вкладкам с помощью атрибута. Мой класс выглядит следующим образом:

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) 

Я пробовал разные способы заставить клавиатуру правильно импортировать, поскольку, похоже, она не распознает ее аннотацию, но ничего не исправляет ошибку. Является ли это ошибкой структуры, которая не удивительна, поскольку мы в альфе, или я делаю что-то неправильно?

Благодаря

Answer 1

Попробуйте мой код, работает на 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>