無法在離子2組件中注入服務

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

} 

我得到以下錯誤：

Can't resolve all parameters for 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

如果是身份驗證服務，您可能不需要在較低的抽象級別提供它。它仍然需要導入才能使用，但不需要將它添加到較低層組件中的提供程序[]中。

這可能會導致錯誤，因爲某些原因，無論出於何種原因，它可能無法在該抽象級別提供Auth實例。值得注意的是，我儘量不要在我的服務上使用構造函數 - 這可能會導致問題（或者兩者都出現問題）。

Answer 2

這裏的問題是循環依賴。您已經在您的服務中導入組件，並且希望將服務注入到相同的組件中。所以角度不知道首先加載哪個。 您需要查看forwardref。 在你的組件構造，

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

您可能要參考here更多。