如何扩展 ionic2 选项卡组件?
How to extend ionic2 tab component?
开始使用基于 Angular2 的 Ionic2,我目前正在尝试扩展基本选项卡组件以添加额外的输入。重点是按属性将模型列表分类到选项卡中。
我的 class 如下:
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 阶段,所以并不奇怪,还是我做错了什么?
谢谢
试试我的代码,适用于 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>
开始使用基于 Angular2 的 Ionic2,我目前正在尝试扩展基本选项卡组件以添加额外的输入。重点是按属性将模型列表分类到选项卡中。 我的 class 如下:
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 阶段,所以并不奇怪,还是我做错了什么?
谢谢
试试我的代码,适用于 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>