2016-06-15 10 views
5

У меня есть проблема с инъекционным сервисом в Angular2 с использованием рамки Ionic2.Ionic2, вводят NavController в инъецируемый сервис

Моя служба выглядит следующим образом:

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

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

    constructor(nav) { 
    } 
} 

И я получаю ошибку No provider for NavController. Это странно, потому что в любой класс страницы он работает, хотя он имеет @Component, может быть, это улов.

редактировать # 1:

Я Предоставляя эту услугу в ionicBootstrap, как это:

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

ответ

12

Как вы можете себе here, @mhartington (от ионной команды) говорит:

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

И

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.

При этом, вы можете получить СЧ делая

var nav = this.app.getActiveNav(); 

Как вы можете видеть here.

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

EDIT: в качестве другого пользователя сказал:

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.

Таким образом, лучший способ сделать это, было бы:

во-первых, добавьте observable в службе, чтобы знать когда необходимо позвонить: 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); 
    } 
} 

И тогда только, в вашем app.ts (или в вашем самом верхнем компоненте):

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

Не забудьте добавить его в ionicBootstrap вашем приложении:

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

Или, после Angular2 Style Guide, добавьте его как provider в самый верхний компонент (MyApp в этом случае):

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

Или (в зависимости от сценария/использования сервиса) передайте страницу nav в качестве параметра для службы –

+0

Это прекрасный ответ, я собираюсь классический состав в этом случае. – MyFantasy512

+0

Mhh любые идеи, что это может быть? 'browser_adapter.js: 84 TypeError: Невозможно прочитать свойство 'next' of null' в моем обслуживании. – nottinhill