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

问题描述

我的服务如下所示：

我在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]，{}）; 
  

解决方案

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

只是在这个时候，你不应该将ViewController或
NavController注入服务。这不是他们的预期目的。

和

该服务不应负责显示警报/加载/或
任何需要由nav激活的组件。一个服务应该只是
用于获取和返回数据。

任何其他应该在组件内完成。

可以这样说，你可以通过执行

  var nav = this.app.getActiveNav（）; 
  

喜欢你可以看到 here 。

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

编辑：另一位用户说：

从服务（破坏的MVC）更改视图是不好的做法。
但是，您可以将事件从服务器发送到主控制器
，控制器可以使用NavController（最佳方法），或者您可以将a
NavController发送给您的服务（如属性）办法...）。或
，您可能需要创建一个组件而不是使用该服务。

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

首先，在您的服务中添加 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 
}）; 
  

或者，按照 Angular2风格指南，将其添加为最顶层组件（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 in any 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:

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

And

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

Like you can see here.

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

EDIT: As another user said:

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:

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