如何扩展ionic2 tab组件？ [英] How to extend ionic2 tab component?

问题描述

开始使用基于Angular2的Ionic2，我正在尝试扩展基本选项卡组件以添加额外的输入。重点是通过属性将模型列表排序到选项卡中。
我的课程如下：

Getting started on Ionic2 which is based on Angular2 and I'm currently trying to extend the base tab component to add an extra input. The point is to sort a list of models into tabs by an attribute. My class is the following:

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

然后尝试将其用作普通标签：

I then try using it as a normal tab :

<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状态，或者我做错了什么就不会感到惊讶？

I've tried different ways of getting Keyboard to import correctly as it seems it doesn't recognize it's annotation, but nothing seems to correct the error. Is this a framework bug which wouldn't be surprising since we're in alpha, or am I doing something wrong?

谢谢

推荐答案

试试我的代码，适用于2.0.0-beta.3

Try my code, works on 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>

这篇关于如何扩展ionic2 tab组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！