Ionic2, inietta il NavController al servizio iniettabile

Question

Ho un problema con il servizio iniettabile in Angular2 utilizzando il framework Ionic2.

Il mio servizio è simile al seguente:

import {Injectable} from '@angular/core'; 
import {NavController} from 'ionic-angular'; 

@Injectable() 
export class ViewStackController { 
    static get parameters() { 
    return [[NavController]]; 
    } 

    constructor(nav) { 
    } 
} 

e ottengo l'errore No provider for NavController. È strano perché in qualsiasi classe Page sta funzionando, sebbene abbia @Component, forse questo è il trucco.

Modifica # 1:

sto fornendo questo servizio in ionicBootstrap, in questo modo:

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

Answer 1

Come potete se here, @mhartington (da squadra ionica) dice:

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

E

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.

Detto questo, è possibile ottenere il nav facendo

var nav = this.app.getActiveNav(); 

Come si può vedere here.

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

EDIT: Come un altro utente ha detto:

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.

Quindi, un modo migliore per farlo, sarebbe:

in primo luogo, aggiungere un observable nel vostro servizio, per conoscere quando si deve chiamare 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); 
    } 
} 

E poi solo, nel vostro app.ts (o nella vostra più in alto componente):

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

ricordati di aggiungerlo nel ionicBootstrap della vostra applicazione:

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

Oppure, seguendo lo Angular2 Style Guide, aggiungilo come provider nel componente più in alto (MyApp in questo caso):

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