Angular2:使用自定义装饰器或注释将提供程序注入组件?

时间:2016-04-07 00:59:18

标签: angularjs typescript angular ionic2 angular2-services

我使用简单的@Page隐藏了Ionic 2中某些TabsProvider s(Ionic 2装饰器)的标签:

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

标签组件订阅currentStateTabsProvider被注入各个页面,如下所示:

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并将onPageWillEnteronPageWillLeave方法添加到SamplePage。

装饰器(或注释)可以以某种方式注入额外的Angular提供者吗?

到目前为止我得到的最远:

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

0 个答案:

没有答案