Ionic2，将 NavController 注入 Injectable Service

问题描述

我在使用 Ionic2 框架的 Angular2 中的 Injectable Service 存在问题.

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

我的服务如下所示:

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

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

  constructor(nav) {
  }
}

我得到错误 No provider for NavController.这很奇怪，因为在它工作的任何 Page 类，尽管它有 @Component，也许这就是问题所在.

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

编辑#1:

我在 ionicBootstrap 中提供这个服务，像这样:

I am providing this service in ionicBootstrap, like this:

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

推荐答案

如你所见 这里，@mhartington(来自 ionic 团队)说:

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

只是为了插话，你不应该注入 ViewController 或NavController 进入服务.这不是他们的预期目的.

和

服务不应该负责显示警报/加载/或任何需要通过导航激活的组件.服务应该只是用于获取和返回数据.

其他任何事情都应该在组件内完成.

Anything else should be done within the component.

话虽如此，您可以通过以下方式获得导航

That being said, you can obtain the nav by doing

var nav = this.app.getActiveNav();

如您所见 这里.

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

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

正如另一位用户所说:

从服务更改视图是不好的做法(损坏的 MVC).但是，您可以将事件从服务发送到主控制器，控制器可以使用 NavController (最好的方式)，或者你可以发送NavController 像属性一样为您的服务提供服务(不错的方式......).或者您可能需要创建一个组件而不是使用该服务.

所以，一个更好的方法是:

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

首先，在您的服务中添加一个 observable，以了解何时应该调用 dismiss:

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

然后仅，在您的 app.ts(或在您最顶层的组件中):

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

记得把它添加到你应用的ionicBootstrap中:

Remember to add it in the ionicBootstrap of your app:

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

或者，按照 Angular2 样式指南，将其添加为 provider 在最顶层的组件中(本例中为 MyApp):

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 注入 Injectable Service的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！