Ionic2/Angular2 循环依赖

Question

我正在使用 Ionic 2 rc4。

我遇到了一个问题，由于循环依赖而出现错误。

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

我有一个使用UtilityService 的类LoginEmailPage。

例如来自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、?、事件、LoadingController）。 在 CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/main.js:39298:19)

? 是UtilityService。

问题

如何让服务 (UtilityService) 导航到已引用服务 (UtilityService) 的页面 (RegisterPage)？

谢谢

更新

由于以下建议：

基于this，我尝试过使用Injector：

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

问题

我怎样才能让它与不是组件而是可注入的服务一起使用？

更新

更多信息，我正在添加每个文件的构造函数。

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) {

更新

感谢下面的建议，我试试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 });

但是我还是原来的编译错误。我一定做错了什么。有什么想法吗？

更新

在RegisterPage，我使用forwardRef：

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

但我收到以下错误：

错误：RegisterPage 没有提供程序！

所以我将RegisterPage 添加到providers 中的app.modula.ts，然后我得到：

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 的构造函数中设置。