Ionic2 - 使用 TabsPage 重用服务会破坏应用程序，导致启动时出现运行时错误答案

【问题标题】：Ionic2 - Reusing Service with TabsPage breaks app, causes runtime error on startupIonic2 - 使用 TabsPage 重用服务会破坏应用程序，导致启动时出现运行时错误
【发布时间】：2017-01-03 22:45:46
【问题描述】：

我是 Ionic2 的新手，遇到了一个错误，似乎是循环依赖，我无法弄清楚页面。

Error: Can't resolve all parameters for HiredJobsPage: (?).

为了查明问题，我将我的代码精简到了最基本的程度；它与TabsPage有关。

我正在使用 Ionic2 的标签模板项目，其中是一个 tabs.ts 文件。此文件指定要在页面底部显示的 3 个选项卡，每个选项卡都链接到另一个页面。

import { Component } from '@angular/core';

import { JobRequestsPage} from '../job-requests/job-requests';
import { HiredJobsPage } from '../hired-jobs/hired-jobs';
import { ProfilePage } from "../profile/profile";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = ProfilePage;
  tab2Root: any = JobRequestsPage;
  tab3Root: any = HiredJobsPage;

  constructor() {

  }
}

我还有一个非常基本的服务，除了将 TabsPage 的一个实例分配给一个局部变量之外什么都不做。

import {Injectable} from '@angular/core';
import {TabsPage} from "../../pages/tabs/tabs";

@Injectable()
export class MyService {

  foo: any = TabsPage;

  constructor() {

  }
}

当 MyService 仅注入一个组件时，此服务工作正常，项目编译并运行。但是，当我将服务注入两个组件时，项目会中断并且无法运行。如果我将另一个页面（ProfilePage、JobRequests、null 等）分配给 foo 变量，一切都很好；只有 TabsPage 会导致错误。为什么会这样？

【问题讨论】：

标签： angular dependency-injection ionic2 circular-dependency

【解决方案1】：

请特别查看angular dependency injection 和forward reference。另一篇博文是here

此服务工作正常，项目编译并运行，当 MyService 仅注入到一个组件中。但是，当我注入服务分成两个组件，项目中断并且不会运行。如果我将另一个页面（ProfilePage、JobRequests、null 等）分配到 foo 变量，一切都很好；只有 TabsPage 会导致错误。

您的标签页 (T) 指的是类：P、J 和 H。 Service(S) 指的是 T。

     T        S
    /|\       |
   / | \      |
  P  J  H     T

根据你选择注入服务的类，你最终会得到指向标签页（T）的循环依赖。一种解决方案是在注入服务时使用前向引用。

constructor(@Inject(forwardRef(() => MyService )) myService)

【讨论】：

太棒了。感谢您的详细解答。