2016-06-15 28 views
5

Ionic2 framework'ü kullanarak Angular2'de Injectable Service ile ilgili bir sorunum var.Ionic2, Enjekte Edilebilen Servise NavController enjekte

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

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

    constructor(nav) { 
    } 
} 

Ve hata No provider for NavController olsun:

hizmetim buna benzemez. Bu garip çünkü 'da herhangi bir Page sınıfı çalışıyor, ancak @Component var, belki de bu yakalayıcı.

düzenleme # 1:

böyle, ionicBootstrap bu hizmeti veren ediyorum:

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

cevap

12

Eğer here, (iyonik takımdan) @mhartington diyor se gibi:

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

Ve

Eğer here de görebileceğiniz gibi 210 söyleniyor

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.

, sen

var nav = this.app.getActiveNav(); 

yaparak nav elde edebilirsiniz.

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

DÜZENLEME: başka bir kullanıcı olarak söyledi:

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.

Yani, bunu yapmak için daha iyi bir yol olurdu:

Öncelikle bilmek, senin hizmetinde bir observable eklemek dismiss çağrıldığında:

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

Ve app.ts sadece sonra , (ya da en üstteki bileşeni olarak):

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

uygulamanızın ionicBootstrap bunu eklemeyi unutmayın:

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

Veya, Angular2 Style Guide'u izleyerek, en üstteki bileşene provider olarak ekleyin (bu durumda MyApp):

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

Ya da (senaryoya/hizmet kullanımına bağlı olarak), sayfa nav işlevini –

+0

hizmetine bir parametre olarak geçirin. Bu iyi bir yanıt, klasik kompozisyon için gidiyorum. – MyFantasy512

+0

Herhangi bir fikrin var mı? browser_adapter.js: 84 TypeError: Hizmetimdeki 'null' mülkünün 'next' özelliği okunamıyor. – nottinhill