来自提供商的 angular2 firebase 无法正常工作

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();