Ionic2，将 NavController 注入 Injectable Service [英] Ionic2, inject NavController to 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 进入服务.这不是他们的预期目的.

Just to chime in on this, you shouldn't be injecting ViewController or NavController into Service. This is not their intended purpose.

和

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

The service shouldn't be responsible for displaying alerts/loading/ or any component that needs to be activated by nav. A service should just be for getting and returning data.

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

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 像属性一样为您的服务提供服务(不错的方式......).或者您可能需要创建一个组件而不是使用该服务.

It's bad practice to change a view from a service (broken MVC). However, you could send events from services to the main controller, and the controller can use NavController (best way), or you could send NavController to your service like an attribute (not bad way...). Or you may need to create a component instead of using the service.

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

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