Ionic2，将 NavController 注入可注入服务 [英] Ionic2, inject NavController to Injectable Service

问题描述

我在使用 Ionic2 框架的 Angular2 中的可注入服务有问题.

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

并且我收到错误没有 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(来自离子团队)说:

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.

所以，更好的方法是:

首先，在您的服务中添加一个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 注入可注入服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！