Ionic2，将NavController注入到可注入服务

问题描述

我的服务如下所示：

我在Angular2中使用Ionic2框架存在可注入服务的问题。 pre class =lang-js prettyprint-override> import'Injectable} from'@ angular / core';
import {NavController} from'ionic-angular';

@Injectable（）
导出类ViewStackController {
static get parameters（）{
return [[NavController]];
}

构造函数（nav）{
}
}


我收到错误没有NavController的提供者。这是奇怪的，因为在
任何Page类都可以工作，虽然它有 @Component ，也许这是抓住。

编辑＃1：

我在 ionBootstrap 中提供此服务，像这样：

  ionBootstrap（MyApp，[ViewStackController]，{}）; 
  

解决方案

正如你所见，@mhartington （来自离子团队）说：

和

所以，一个更好的方法来做，将是：

首先，在您的服务中添加 observable ，以了解应该调用：

  import {Injectable} from'@ angular / core' 
 import {Platform} from'ionic-angular'; 
 import {Observable} from'rxjs / Observable'; 
 
 @Injectable（）
导出类MyCustomService {
 
 //可观察我们要使用的
 private dismissObserver：any;公开解雇：任何; 
 
构造函数（私有平台：平台）{
 //你的东西
 // ... 
 
 this.dismissObserver = null; 
 this.dismiss = Observable.create（observer => {
 this.dismissObserver = observer; 
}）; 
} 
 
 public yourMethod（...）：void {
 //这里我们发送订单返回主页
 this.dismissObserver.next （真正）; 
} 
} 
  

然后仅在您的 app.ts （或最顶层的组件）中：

  initializeApp（）：void {
 this.platform.ready（）。then（（）=> {
 //好的，所以平台已经准备就绪，我们的插件可用
 //在这里你可以做任何更高级别的本地事情你可能需要
 StatusBar.styleDefault（）; 
 
 //我们订阅可观察到的服务
这个.myCustomService.dismiss.subscribe（（value）=> {
 this.navController.setRoot（HomePage）; 
}）; 
}）; 
} 
  

记住将它添加到 ionBootstrap 你的应用程序：

  ionBootstrap（MyApp，[MyCustomService，...]，{
 / / statusbarPadding：true 
}）; 
  

或者，按照，将其添加为最顶层组件（MyApp）的提供者：

  @Component（{
 templateUrl：'build / app.html'，
指令：[.. 。]，
 providers：[MyCustomService] 
}）
 class MyApp {
 // ... 
} 
  

I have a problem with Injectable Service in Angular2 using Ionic2 framework.

My service looks like this:

import {Injectable} from '@angular/core';
import {NavController} from 'ionic-angular';

@Injectable()
export class ViewStackController {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
  }
}

And I get error No provider for NavController. It's strange because inany Page class it's working, though it has @Component, maybe that's the catch.

edit #1:

I am providing this service in ionicBootstrap, like this:

ionicBootstrap(MyApp, [ViewStackController], {});

解决方案

As you can se here, @mhartington (from ionic team) says:

And

That being said, you can obtain the nav by doing

var nav = this.app.getActiveNav();

Like you can see here.

=================================================

EDIT: As another user said:

So, a better way to do it, would be:

First, add an observable in your service, to know when the dismiss should be called:

import {Injectable} from '@angular/core';
import {Platform} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class MyCustomService {

  // Observables we're going to use
  private dismissObserver: any;
  public dismiss: any;

  constructor(private platform: Platform){
    // Your stuff
    // ...

    this.dismissObserver = null;
    this.dismiss = Observable.create(observer => {
        this.dismissObserver = observer;
    });
  }

  public yourMethod(...):void {
    // Here we send the order to go back to the home page
    this.dismissObserver.next(true);
  }
}

And then only, in your app.ts (or in your top-most component):

 initializeApp(): void {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();

      // We subscribe to the dismiss observable of the service
      this.myCustomService.dismiss.subscribe((value) => {
        this.navController.setRoot(HomePage);
      });
    });
  }

Remember to add it in the ionicBootstrap of your app:

ionicBootstrap(MyApp, [MyCustomService, ...], {
  //statusbarPadding: true
});

Or, following the Angular2 Style Guide, add it as a provider in the top-most component (MyApp in this case):

@Component({
  templateUrl: 'build/app.html',
  directives: [...],
  providers: [MyCustomService]
})
class MyApp {
  // ...
}

这篇关于Ionic2，将NavController注入到可注入服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！