Ionic-framework: Ionic V2：没有 NavController 的提供者！解决方案？

创建于 2016-12-10 · 15评论 · 资料来源: ionic-team/ionic-framework

离子版本：（用“x”检查一个）
[] 1.x
[x] 2.x

我正在提交一个 ... （用“x”检查一个）
[x] 错误报告
[ ] 功能要求
[ ] 支持请求 => 请不要在此处提交支持请求，请使用以下渠道之一： https : http://ionicworldwide.herokuapp.com/

当前行为：
在服务的构造函数中注入 NavController 失败，没有提供者错误

预期行为：
上班

重现步骤：
这个类抛出错误（其他dep.injection不会抛出任何错误）

import {Interceptor, InterceptedRequest, InterceptedResponse} from 'ng2-interceptors';
import {NavController, Platform, AlertController} from "ionic-angular";
import {Injectable, Injector} from "@angular/core";

@Injectable()
export class ServerInterceptorService implements Interceptor {

  constructor(public platform: Platform,
              public alertCtl: AlertController,
              public navCtl: NavController) {
  }

  public interceptBefore(request: InterceptedRequest): InterceptedRequest {
    // Do whatever with request: get info or edit it

    return request;
    /*
     You can return:
     - Request: The modified request
     - Nothing: For convenience: It's just like returning the request
     - <any>(Observable.throw("cancelled")): Cancels the request, interrupting it from the pipeline, and calling back 'interceptAfter' in backwards order of those interceptors that got called up to this point.
     */
  }

  public interceptAfter(response: InterceptedResponse): InterceptedResponse {
    // Do whatever with response: get info or edit it
    console.log("////////////", response)
    return response;
    /*
     You can return:
     - Response: The modified response
     - Nothing: For convenience: It's just like returning the response
     */
  }
}

上面的类替换了 app.module.ts 中的 http provider

providers:[
    ServerInterceptorService,
    {
      provide: Http,
      useFactory: interceptorFactory,
      deps: [XHRBackend, RequestOptions, ServerInterceptorService]
    },
...]

其他依赖项被正确注入。

资料来源

barocsi

👍2

最有用的评论

@m3l7尝试下一个：

  constructor(
    protected app: App,
...
  get navCtrl(): NavController {
    return this.app.getRootNav();
  }

bobrosoft 于 2017-03-09

👍16 🎉6 ❤1

所有15条评论

根据https://forum.ionicframework.com/t/why-cant-i-import-navcontroller-and-viewcontroller-into-service-or-app/40999/26
据说

只是为了说明这一点，您不应该将 ViewController 或 NavController 注入 Service。
这不是他们的预期目的。

那么请告诉我，我们应该如何向应用程序添加全局拦截器，这取决于了解用户看到的活动视图？

我们是否应该通过告诉每个视图组件侦听或订阅拦截器服务（如果它根据其内部逻辑发出某些内容，以便视图知道它是否应该返回登录页面）来使我们的生活变得过于复杂？

根据
https://medium.com/coding-snippets/ionic-2-ui-alert-from-a-angular-2-service-221a2e526760#.spxbdpfz1

constructor(private app: IonicApp) {}

let alert = Alert.create({title: 'Error', message: message, buttons: ['OK']});
var nav = this.app.getActiveNav();
nav.present(alert

对我来说在 rc3 中不起作用。

我可能遗漏了一些点，但是......

仅仅因为 Angular 团队或其他人说_这是一个视图组件，那是一个服务对象_，仅仅因为某种分类固定而完全隔离它们并没有帮助。所有这些都是可以而且应该能够在需要时相互引用的对象。

此外，抽象应用程序级别的 NavController 更像是一个编排全局控制器，而不是一个简单的视图耦合类。因此，由于 NavController “如此核心”，我建议重新考虑这种设计或向 Ionic 核心模块添加集中的应用程序范围服务。

barocsi 于 2016-12-10

👍15

有一个很简单的解决办法脏，你app.component.ts的内奇妙
@ViewChild('carguardNav') navCtrl: NavController
可以传递给其他服务提供商，例如

myGlobalService.nav = this.navCtrl

在平台初始化阶段，然后可以从依赖并注入 MyGlobalService 的其他服务中检索。

barocsi 于 2016-12-10

👍3

你好！很抱歉您在这里遇到问题。因此无法将 NavController 注入到服务中，因为服务没有 NavController。这意味着 Angular 依赖注入不知道要获取哪个 NavController 引用也导致错误。需要记住的重要一点是，这不是我们的 NavController 的核心，它是一个标准的 Angular DI 错误。如果我正确理解您的用例，您可以使用事件发射器来获得相同的功能。因为这不是我们的错误，而只是依赖注入在 Angular 2 中的工作方式我现在将关闭这个问题，但我强烈建议您为集中式应用程序范围的导航控制器服务理念打开一个功能请求上面提到。感谢您使用 Ionic！

jgw96 于 2016-12-12

👎21 👍19 ❤1 🎉1

实际上，我已经制定了另一个可能引起关注的解决方案，我正在使用应用程序范围的事件通过 IoC 模式连接视图和服务组件，这意味着来自服务的旧广播事件并在视图组件中订阅它们。

barocsi 于 2016-12-15

@barocsi你介意发布你的解决方案吗？我遇到了同样的问题。

gregfrasco 于 2016-12-22

强迫那个狗屎与 getter 和 Injector 一起工作

  constructor(
    protected injector: Injector
  ) {

...

  get navCtrl(): NavController {
    return this.injector.get(NavController);
  }

bobrosoft 于 2017-02-03

👍16 🎉4 ❤1

@bobrosoft你有一个有效的例子吗？我用你的代码再次得到“Navcontroller 没有注射器”

m3l7 于 2017-03-09

@m3l7尝试下一个：

  constructor(
    protected app: App,
...
  get navCtrl(): NavController {
    return this.app.getRootNav();
  }

bobrosoft 于 2017-03-09

👍16 🎉6 ❤1

@bobrosoft好的，它可以工作.. 问题是通过直接调用 nav.push(MyComponent) 我得到一个依赖循环，所以我被迫使用“路由器”服务捕获的事件，这将触发 nav.push （希望这个解决方案能奏效）。

在ionic2中有更高级的路由解决方案会很棒..我只是想制作一个基本的401拦截器并将应用程序重定向到登录页面

m3l7 于 2017-03-09

嘿@bobrosoft ：这就是它的方式！

构造函数（@Inject（平台）平台，@Inject（NavController）navController）{
}

这在这里解释： https :

mpeguero 于 2017-03-17

🎉1 👎1

@mpeguero如果服务（我们关于服务，对吧？）在早期阶段实例化，这将不起作用，这在技术上与我的第一个答案几乎相同。我之前检查过。

那个解决方案

  constructor(
    protected app: App,
...
  get navCtrl(): NavController {
    return this.app.getRootNav();
  }

更好，但也不理想。

bobrosoft 于 2017-03-20

👍6 🎉2 ❤1 😕1 😄1

在离子文档中有解决方案。它工作正常。

获取 Outlook for Android http://aka.ms/ghei36

在星期一，2017年3月20日在上午04时44分-0400， “弗拉基米尔Tolstikov”< [email protected] [email protected] >中写道：

@mpeguero https://github.com/mpeguero如果服务（我们关于服务，对吧？）在早期阶段实例化，这将不起作用，这在技术上与我的第一个答案几乎相同。我之前检查过。

那个解决方案

构造函数（
受保护的应用程序：应用程序，
...
获取导航控件（）：导航控制器{
返回 this.app.getRootNav();
}

更好，但也不理想。

—
你收到这个是因为你被提到了。
直接回复本邮件，在 GitHub 上查看https://github.com/driftyco/ionic/issues/9581#issuecomment-287701528 ，或者将线程静音https://github.com/notifications/unsubscribe-auth/ABvDpy- 6mn19VUnkSbBakAj11hsdEv1zks5rnjxygaJpZM4LJvpd 。

mpeguero 于 2017-03-22

👎2 👍1

那么目前关于这个问题的解决方案是什么？如果拦截器获取 HttpErrorResponse 状态为 401 或 403，我尝试打开注销页面，但无法使其正常工作。看起来不可能，真的。

abaginski 于 2018-03-21

👍1

全局服务不会注入和实例化NavController也是常识。假设您在页面 A 中，其组件使用private navCtrl: NavController ，并且它还使用global-function-provider 。
现在，如果这个提供者也注入并使用它自己的NavController ，那么从使用它的组件调用提供者将会把事情搞砸。

在我看来，每当您想使用该页面的navCtrl ，只需将其作为参数传递给您正在使用的全局函数即可。

thelebdev 于 2018-06-18

感谢您的问题！此问题已被锁定，以防止发表与原始问题无关的评论。如果使用最新版本的 Ionic 仍然存在问题，请创建一个新问题并确保模板已完整填写。

ionitron-bot[bot] 于 2018-09-01

此页面是否有帮助？

0 / 5 - 0 等级

Ionic-framework: Ionic V2：没有 NavController 的提供者！ 解决方案？

最有用的评论

所有15条评论

相关问题

Ionic-framework: Ionic V2：没有 NavController 的提供者！解决方案？