Question

我有一个简单的离子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) {}

}

我收到以下错误：

无法解析AgendaPage的所有参数：（NavController， NavParams，？）。

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

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

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

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

Answer 2

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

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

您可能需要提及here以获取更多信息。

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

2 个答案: