Ionic2/Angular2 Cyclical Dependencies

Question

我正在使用Ionic 2 rc4。

我有一個問題，我得到一個錯誤，由於週期性的依賴。

+-------------------------------------+ 
    | LoginEmailPage RegisterPage | 
    |   ↓   ↓↑   | 
    |   UtilityService   | 
    +-------------------------------------+ 

我有一個類LoginEmailPage，使得使用的UtilityService。

例如從LoginEmailPage：

this.utilityService.login(nav) 

在UtilityService：

public login(nav: NavController): void { 
    nav.popTo(RegisterPage); 
} 

RegisterPage還使用utilityService的，所以我得到一個編譯時錯誤：

metadata_resolver.js:623Uncaught Error: Can't resolve all parameters for LoginEmailPage: (FirebaseAuth, MenuController, 

NavController, NavParams, FormBuilder, ViewController, AlertController, PersonService, ?, Events, LoadingController). at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/main.js:39298:19)

凡?是UtilityService。

問題

我怎麼能有一個服務（UtilityService）導航到一個頁面（RegisterPage）已經引用服務（UtilityService）？

感謝

UPDATE

由於以下建議：使用Injector

基於this，我曾嘗試：

utilityService.ts

import { Injectable, Injector } from "@angular/core"; 

    private registerPage: RegisterPage = null; 
    constructor(injector: Injector,... 
     setTimeout(() => this.registerPage = injector.get(RegisterPage)); 

    public login(nav: NavController): void { 
     nav.popTo(this.registerPage); 
    } 

但我仍然得到與上面相同的錯誤。

其次，我看看this和this，這表明使用forwardRef。我的問題是我的服務是@Injectable而不是@Component。所以examples我看，確實是這樣的：

@Component({ 
    selector: 'my-button', 
    template: `<div> 
       <icon></icon> 
       <input type="button" /> 
      </div>`, 
    directives: [forwardRef(() => MyIcon)] // MyIcon has not been defined yet 
})          // forwardRef resolves as MyIcon when MyIcon is needed 

問題

我怎樣才能得到這與是不是一個組件服務工作，而是一種可注射的？

UPDATE

富勒更多信息，我將每個文件的構造函數。

loginemail。TS

@Component({ 
    templateUrl: 'loginemail.html' 
}) 

export class LoginEmailPage { 
... 
    constructor(public auth: FirebaseAuth, menu: MenuController, public nav: NavController, public navParams: NavParams, public builder: FormBuilder, public viewCtrl: ViewController, alertCtrl: AlertController, personService: PersonService, utilityService: UtilityService, events: Events, public loadingCtrl: LoadingController) { 

register.ts

@Component({ 
    templateUrl: 'register.html' 
}) 

export class RegisterPage { 
... 
    constructor(public nav: NavController, public navParams: NavParams, public builder: FormBuilder, personService: PersonService, 
     public viewCtrl: ViewController, public alertCtrl: AlertController, utilityService: UtilityService, events: Events, 
     public loadingCtrl: LoadingController, public auth: FirebaseAuth) { 

utilityService.ts

@Injectable() 
export class UtilityService { 
... 
    constructor(injector: Injector, alertCtrl: AlertController, menu: MenuController, popoverController: PopoverController, storage: Storage) { 

UPDATE

感謝下面的建議，我嘗試this。

utilityService.ts

import { Injectable, Inject, forwardRef } from "@angular/core"; 
import { RegisterPage } from '../register/register'; 

@Injectable() 
export class UtilityService { 
... 

public registerPage: RegisterPage = null; 

    constructor(@Inject(forwardRef(() => RegisterPage)) registerPage, ... 
     this.registerPage = registerPage; 
      ... 
      nav.popTo(this.registerPage, { personModel }); 

但我還是原來的編譯錯誤。我一定做錯了什麼。有任何想法嗎？

UPDATE

在RegisterPage，我用forwardRef：

constructor(@Inject(forwardRef(() => UtilityService)) utilityService 

，但我得到了以下錯誤：

Error: No provider for RegisterPage!

所以我在app.modula.ts添加RegisterPage到providers，但後來我得到：

Error: Uncaught (in promise): Error: Provider parse errors: 
Cannot instantiate cyclic dependency! RegisterPage: in NgModule AppModule 
Error: Provider parse errors: 
Cannot instantiate cyclic dependency! RegisterPage: in NgModule AppModule 

Answer 1

嘗試在你的組件 例如構造使用forwardRef：

export class LoginEmailPage { 
constructor(... 
    @Inject(forwardRef(() => UtilityService))utilityService, events: Events, 
     public loadingCtrl: LoadingController, public auth: FirebaseAuth) { 

檢查here

而且RegisterPage和LoginEmailPage是組件不是提供商（注射用）。它不應該在UtilityService的構造函數中設置。