提供程序无法工作的angular2防火墙

Question

我有一个新项目，并添加了angularfire2：

npm install angularfire2 firebase --save

在app.module.ts中，我导入模块并用以下方法初始化它：

import { AngularFireModule } from 'angularfire2';
...
imports: [
...
  AngularFireModule.initializeApp(firebaseconfig)

然后，我可以在组件中使用它，导入如下所示：

import { AngularFire, FirebaseListObservable } from 'angularfire2';
...
constructor(public navCtrl: NavController, public navParams: NavParams,
  public af: AngularFire) {
  this._users = af.database.list('users').valueChanges();
}

一切都很好。

但是我想把数据库处理移到提供者那里。因此，我创建了一个提供程序，将名称添加到app.module.ts providers[]中，并将其导入到组件中：

constructor (constructor(public navCtrl: NavController, public navParams: NavParams,
  public db: DataserviceProvider) {
  this._users = db.users().valueChanges();
}

提供程序如下所示：

@Injectable()
export class DataserviceProvider {
  private _users: FirebaseListObservable<any[]>;

  constructor(public af: AngularFire) {
    this._users = af.database.list('users').valueChanges();
  }
  users(): FirebaseListObservable<any[]> {
    return this._users;
  }
}

这就给了我一个奇怪的错误：

compiler.es5.js:1694 Uncaught Error: Can't resolve all parameters for DataserviceProvider: (?).

当我从构造函数中删除'public af: AngularFire‘时，该错误就消失了(但显然会在组件中出现其他错误)。

我已经找了好几个小时了，这个“解决”错误的通用版本似乎表明了一个循环依赖。但是不管我怎么看，我似乎在这里面找不到任何循环。任何指点都非常感谢！

Answer 1

您也可以尝试这样做：

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'courses-list',
  templateUrl: 'courses-list.component.html',
  styles: []
})
export class CoursesListComponent implements OnInit {
  coursesObservable: Observable<any[]>;
  constructor(private db: AngularFireDatabase) { }
  ngOnInit() {
    this.coursesObservable = this.getCourses('/courses');
  }
  getCourses(listPath): Observable<any[]> {
    return this.db.list(listPath).valueChanges();
  }
}

要了解更多信息，您可以访问(angular2，5+firebase+bootsrap)中的整个应用程序：https://codingthesmartway.com/building-an-angular-5-project-with-bootstrap-4-and-firebase/

Answer 2

您的DataserviceProvider应该是这样的

constructor(private af: AngularFireDatabase) {
    this._users = af.database.list('users');
}
users(): FirebaseListObservable<any[]> {
    return this._users.valueChanges();
}

在你的component里打电话

this._users = db.users();