无法在 Ionic 2 中的组件中注入服务

Question

我有一个简单的 ionic 2 应用程序。

在服务中创建

import { Storage } from '@ionic/storage';
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { AlertController } from 'ionic-angular';
import { NavController, NavParams } from 'ionic-angular';
import { AgendaPage } from '../pages/agenda/agenda';
import { LoginPage } from '../pages/login/login';
import 'rxjs/add/operator/map';
@Injectable()
export class Auth {
  constructor(public http: Http, public storage: Storage, public alertCtrl: AlertController, public navCtrl: NavController) {}
}

app.components.ts 注册

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Auth } from '../providers/auth';
import { Rides } from '../providers/rides';
import { AgendaPage } from '../pages/agenda/agenda';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html',
  providers: [Auth, Rides]
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = LoginPage;
  pages: Array<{title: string, component: any}>;
  constructor(public platform: Platform) {
    this.initializeApp();
    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Minha Agenda', component: AgendaPage }
    ];
  }
  initializeApp() {
    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();
      Splashscreen.hide();
    });
  }
  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

尝试将其注入组件

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Auth } from '../../providers/auth';
/*
  Generated class for the Agenda page.
  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-agenda',
  templateUrl: 'agenda.html',
  providers: [Auth]
})
export class AgendaPage {
  openRides: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, private auth: Auth) {}
}

我收到以下错误：

无法解析议程页的所有参数：(导航控制器， 导航参数，？

我觉得奇怪的是，我有一个非常相似的其他组件，我可以毫无问题地使用该服务：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Auth } from '../../providers/auth';
/*
  Generated class for the Login page.
  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  providers: [Auth]
})
export class LoginPage {
    email: string;
    password: string;
    constructor(public navCtrl: NavController, public navParams: NavParams, private auth: Auth) {}
    login() {
    }
}

这非常有效。

Answer 1

如果它是一个身份验证服务，你可能不需要在较低的抽象级别提供它。 它仍然需要导入才能使用，但不需要添加到较低层组件中的提供程序 []。

这可能会导致错误，因为出于某种原因，无论出于何种原因，它都可能无法在该抽象级别提供 Auth 实例。 值得注意的是，我尽量不要在我的服务上使用构造函数 - 这也可能导致问题(或两个问题一起。

Answer 2

这里的问题是循环依赖。您已在服务中导入组件，并希望在同一组件中注入服务。所以角度不知道先加载哪个。您需要查看 forwardref。在组件构造函数中，

constructor(...,@Inject(forwardref(()=>Auth))auth)

您可能想参考此处了解更多信息。