Question

我正在使用Ionic 2 rc4。

由于周期性依赖，我遇到了一个问题。

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

我有一个使用LoginEmailPage的课程UtilityService。

e.g。来自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）。在CompileMetadataResolver._getDependenciesMetadata（http://localhost:8100/build/main.js:39298:19）

?为UtilityService。

问题

如何让服务（UtilityService）导航到已引用该服务的页面（RegisterPage）（UtilityService）？

由于

更新

由于以下建议：

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

Ionic2 / Angular2周期性依赖

1 个答案: