我@Page
使用简单的方法在Ionic 2中隐藏某些标签(Ionic 2装饰器)TabsProvider
:
tabs.ts
import { Injectable } from 'angular2/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class TabsProvider {
currentState = new BehaviorSubject<boolean>(true);
public showTabs(){
this.currentState.next(true);
}
public hideTabs(){
this.currentState.next(false);
}
}
tabs组件订阅currentState
,并TabsProvider
注入到以下各个页面中:
sample-page.ts
:
import {Page} from 'ionic-angular';
import { TabsProvider } from './tabs';
@Page({
...
})
export class SamplePage {
tabsProvider: TabsProvider;
constructor(tabsProvider: TabsProvider) {
this.tabsProvider = tabsProvider;
}
onPageWillEnter(){
this.tabsProvider.hideTabs();
}
onPageWillLeave(){
this.tabsProvider.showTabs();
}
}
该代码实际上是所有样板代码,如果我可以在装饰器(或注解)中定义此功能,则它会更加简洁,例如:
import { Page } from 'ionic-angular';
import { hideTabs } from './tabs';
@hideTabs()
@Page({
...
})
export class BuyPage {
}
但是我在确定如何注入TabsProvider以及将onPageWillEnter
和onPageWillLeave
方法添加到SamplePage时遇到了麻烦。
到目前为止,我走得最远:
在tabs.ts
:
export function hideTabs() {
return function(cls: any) {
cls.prototype.onPageWillEnter = function() {
this.tabsProvider.hideTabs();
};
cls.prototype.onPageWillLeave = function() {
this.tabsProvider.showTabs();
};
return cls;
}
}
这使我们成为了我们所需要的一部分,但是仍然有必要TabsProvider
作为特定实例成员进行导入和注入:
sample-page.ts
import {Page, Events} from 'ionic-angular';
import { hideTabs, TabsProvider } from './tabs';
@hideTabs()
@Page({
...
})
export class SamplePage {
constructor(public tabsProvider: TabsProvider) {
}
}
@hideTabs()
?选项卡组件的相关部分(适用于有兴趣实施的人员)pages/tabs/tabs.ts
:
import { Page } from 'ionic-angular';
import { TabsProvider } from './tabs';
@Page({
...
})
export class TabsPage {
...
currentState: boolean;
constructor(TabsProvider: TabsProvider) {
TabsProvider.currentState.subscribe((state: boolean) => {
this.currentState = state;
});
}
}
pages/tabs/tabs.html
:
<div [ngClass]="{'hide-tabs': !currentState}">
<ion-tabs>
...
</ion-tabs>
</div>
pages/tabs/tabs.scss
:
.hide-tabs ion-tabbar-section {
display: none;
}
我遇到了同样的问题,这是我想出的解决方案。通用方法是:
Reflect.getOwnMetadata
从类中读取现有的依赖项。tabs.ts
:
import TabsProvider from "./tabs";
export function hideTabs() {
return function(cls: Function) : any {
// Save existing onPageWillEnter and onPageWillLeave inplementations
let enter = cls.prototype.onPageWillEnter || function () {};
let leave = cls.prototype.onPageWillLeave || function () {};
// Create new constructor for class
const newCls = function (tabsProvider, ...args) {
this.__hideTabs__tabsProvider = tabsProvider;
return cls.apply(this, args);
}
// Copy prototype to new constructor
newCls.prototype = constructor.prototype;
// Copy metadata to new constructor
let metadatakeys = Reflect.getMetadataKeys(cls);
metadatakeys.forEach(function (key) {
Reflect.defineMetadata(key, Reflect.getOwnMetadata(key, cls), newCls)
});
// Read dependencies list from 'cls', add our own dependency, and write list to 'newCls'
let dependencies = Reflect.getOwnMetadata('design:paramtypes', cls);
dependencies = [TabsProvider].concat(dependencies)
Reflect.defineMetadata('design:paramtypes', params, newCls);
// Define new onPageWillEnter and onPageWillLeave implementation which implement tab show/hide functionality
// and also call the old implementation saved above (if they exist)
newCls.prototype.onPageWillEnter = function() {
this.tabsProvider.hideTabs();
enter.apply(this, arguments);
};
newCls.prototype.onPageWillLeave = function() {
this.tabsProvider.showTabs();
leave.apply(this, arguments);
};
return newCls;
}
}
我也建议移动@hideTabs
下面的装饰@Page
装饰
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句