Ionic-framework: Ionic V2: ¡No hay proveedor para NavController! ¿Solución?

Creado en 10 dic. 2016 · 15Comentarios · Fuente: ionic-team/ionic-framework

Versión iónica: (marque una con "x")
[] 1.x
[x] 2.x

Estoy enviando un ... (marque uno con "x")
[x] informe de errores
[ ] solicitud de función
[] solicitud de soporte => No envíe solicitudes de soporte aquí, use uno de estos canales: https://forum.ionicframework.com/ o http://ionicworldwide.herokuapp.com/

Comportamiento actual:
La inyección de NavController en el constructor del servicio falla sin error del proveedor

Comportamiento esperado:
trabajar

Pasos para reproducir:
Esta clase arroja error (otra inyección dep. No arroja ningún error)

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
     */
  }
}

y la clase anterior reemplaza al proveedor http en app.module.ts

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

Otras dependencias se inyectan correctamente.

Fuente

barocsi

👍2

Comentario más útil

@ m3l7 prueba a continuación:

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

bobrosoft en 9 mar. 2017

👍16 🎉6 ❤1

Todos 15 comentarios

Según https://forum.ionicframework.com/t/why-cant-i-import-navcontroller-and-viewcontroller-into-service-or-app/40999/26
se está diciendo

Solo para intervenir en esto, no debería inyectar ViewController o NavController en Service.
Este no es su propósito previsto.

Entonces, por favor, dígame, ¿cómo deberíamos agregar interceptores globales a la aplicación, que actuarían dependiendo de saber qué vista activa ve el usuario?

¿Complicaremos demasiado nuestras vidas diciéndole a cada componente de la vista que escuche o se suscriba al servicio de interceptor si emite algo dependiendo de su lógica interna para que la vista sepa si debe volver a la página de inicio de sesión?

de acuerdo a
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

no funciona en rc3 para mí.

Puede que me esté perdiendo algún punto, pero ...

El hecho de que el equipo de Angular u otros digan que _esto es un componente de vista y ese es un objeto de servicio_, aislarlos totalmente solo por algún tipo de fijación de categorización no ayuda. Todos ellos son objetos que podrían y deberían poder hacer referencia entre sí cuando sea necesario.

Además, NavController en un nivel de aplicación abstracto es más un controlador global de orquestación que una simple clase de vista acoplada. Entonces, dado que NavController es "tan básico", sugeriría repensar este diseño o agregar un servicio centralizado para toda la aplicación al módulo principal de Ionic.

barocsi en 10 dic. 2016

👍15

Hay una solución sucia muy simple, dentro de su app.component.ts la maravillosa
@ViewChild ('carguardNav') navCtrl: NavController
se puede pasar a otros proveedores de servicios como

myGlobalService.nav = this.navCtrl

durante la fase de inicialización de la plataforma, y luego se puede recuperar de su otro servicio que depende y ha inyectado MyGlobalService.

barocsi en 10 dic. 2016

👍3

¡Hola! Lamento que tengas problemas aquí. Por lo tanto, NavController no se puede inyectar en un servicio porque un servicio no tiene un NavController. Esto significa que la inyección de dependencia angular no sabe qué NavController debe obtener una referencia, lo que también causa un error. Una cosa importante para recordar es que esto no es fundamental para nuestro NavController, es un error DI angular estándar. Si entiendo correctamente su caso de uso, puede usar emisores de eventos para obtener la misma funcionalidad. Debido a que esto no es un error de nuestra parte, sino simplemente cómo funciona la inyección de dependencia en Angular 2, voy a cerrar este problema por ahora, pero le recomiendo encarecidamente que abra una solicitud de función para la idea del servicio de controlador de navegación de la aplicación centralizada que usted mencionar arriba. ¡Gracias por usar Ionic!

jgw96 en 12 dic. 2016

👎21 👍19 ❤1 🎉1

En realidad, he creado otra solución para quien podría preocuparme, estoy usando eventos de toda la aplicación para conectar la vista y los componentes del servicio a través del patrón de IoC, lo que significa que los viejos eventos de transmisión de los servicios y la suscripción a ellos en los componentes de la vista.

barocsi en 15 dic. 2016

@barocsi ¿Te importaría publicar tu solución? Me estoy enfrentando al mismo problema.

gregfrasco en 22 dic. 2016

Obligó a esa mierda a trabajar con getter e Injector

  constructor(
    protected injector: Injector
  ) {

...

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

bobrosoft en 3 feb. 2017

👍16 🎉4 ❤1

@bobrosoft ¿tienes un ejemplo de trabajo? Vuelvo a recibir "no injector for Navcontroller" con su código

m3l7 en 9 mar. 2017

@ m3l7 prueba a continuación:

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

bobrosoft en 9 mar. 2017

👍16 🎉6 ❤1

@bobrosoft ok, funciona ... el problema es que al llamar directamente nav.push (MyComponent) obtengo un bucle de dependencias, así que me veo obligado a usar eventos capturados por un servicio de "enrutador" que activará el nav.push (esperando que esta solución funcione).

Sería genial tener soluciones de enrutamiento más avanzadas en ionic2. Solo estoy tratando de hacer un interceptor 401 básico y redirigir la aplicación a la página de inicio de sesión.

m3l7 en 9 mar. 2017

Hola @bobrosoft : ¡Este es el camino!

constructor (plataforma @Inject (Platform), @Inject (NavController) navController) {
}

Esto se explica aquí: https://github.com/driftyco/ionic/issues/5543

mpeguero en 17 mar. 2017

🎉1 👎1

@mpeguero eso no funcionará si el servicio (nosotros sobre servicios, ¿verdad?) se instancia en etapas anteriores y eso es técnicamente casi lo mismo que mi primera respuesta. Lo comprobé antes.

Esa solucion

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

es mejor pero no ideal también.

bobrosoft en 20 mar. 2017

👍6 🎉2 ❤1 😕1 😄1

En los documentos Ionic hay solución. Funciona bien.

Obtenga Outlook para Android http://aka.ms/ghei36

El lunes 20 de marzo de 2017 a las 4:44 a. M. -0400, "Vladimir Tolstikov" < [email protected] [email protected] > escribió:

@mpeguero https://github.com/mpeguero que no funcionará si el servicio (nosotros sobre servicios, ¿verdad?) se instancia en etapas anteriores y eso es técnicamente casi lo mismo que mi primera respuesta. Lo comprobé antes.

Esa solucion

constructor(
aplicación protegida: Aplicación,
...
obtener navCtrl (): NavController {
return this.app.getRootNav ();
}

es mejor pero no ideal también.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub https://github.com/driftyco/ionic/issues/9581#issuecomment-287701528 , o silencie el hilo https://github.com/notifications/unsubscribe-auth/ABvDpy- 6mn19VUnkSbBakAj11hsdEv1zks5rnjxygaJpZM4LJvpd .

mpeguero en 22 mar. 2017

👎2 👍1

Entonces, ¿cuál es la solución actual al respecto? Intento abrir la página de cierre de sesión si el Interceptor obtiene un estado HttpErrorResponse de 401 o 403, pero no puedo hacer que funcione. Realmente parece imposible.

abaginski en 21 mar. 2018

👍1

También es de sentido común que un servicio global no inyecte ni instancia un NavController . Suponga que está en la página A, cuyo componente usa private navCtrl: NavController , y también usa global-function-provider .
Ahora bien, si este proveedor también está inyectando y usando su propio NavController , llamar al proveedor desde el componente que lo usa estropeará las cosas.

En mi opinión, siempre que desee utilizar el navCtrl esa página, simplemente páselo como parámetro a la función global que está utilizando.

thelebdev en 18 jun. 2018

¡Gracias por el problema! Este problema está bloqueado para evitar comentarios que no sean relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.