angular - Ionic2，将 NavController 注入(inject) Injectable Service

Question

我在使用 Ionic2 框架的 Angular2 中使用 Injectable Service 时遇到问题。

我的服务是这样的:

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，也许这就是问题所在。

编辑#1:

我在 ionicBootstrap 中提供此服务，如下所示:

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

Answer 1

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

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.

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

var nav = this.app.getActiveNav();

如你所见here .

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

编辑:正如另一位用户所说:

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:

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(或您的最顶层组件)中:

 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 中:

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

或者，跟随 Angular2 Style Guide ，将其作为 provider 添加到最顶层的组件中(在本例中为 MyApp):

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