如何在初始路由加载时使用AngularFire2订阅Firebase数据?

时间:2016-11-22 21:20:51

标签: angular angularfire2 angular2-router

我正在使用angular-cli来构建angularfire2应用程序。

我遇到一个问题,即在初始子路径加载时,angularfire2在控制台中抛出错误:

error_handler.js:47 EXCEPTION:Uncaught(在promise中):TypeError:无法读取未定义的属性'subscribe'

当我的页面“刷新”时会发生这种情况。如果我在刷新后离开组件并返回到它,数据加载就好了,我没有收到错误。我不确定这是Angular2,AngularFire2的错误,还是我做错了。有谁有这个问题?这是我的相关组件代码:

import {Component, OnInit, ViewChild, OnDestroy}from '@angular/core';
import {Router} from '@angular/router';
import {AngularFire, FirebaseListObservable, AngularFireModule} from 'angularfire2';


@Component({
  selector: 'app-users',
  templateUrl: 'users.component.html',
  styleUrls: ['users.component.scss', '../shared/styles/dashboard.scss']
})
export class EmployeesComponent implements OnInit, OnDestroy {
  private groupKey: string;
  private groupAdmin: string;
  private user: any;
  private _auth: any;

  private positions: FirebaseListObservable < any > ;
  private users: FirebaseListObservable < any > ;

  constructor(private af: AngularFire, private router: Router) {}

  ngOnInit() {
    this.af.auth.subscribe(auth => {
      this._auth = auth;
      let currentUser = this.af.database.object('/Users/' + this._auth.uid).take(1).subscribe(user => {
        this.groupKey = user.group;
        this.users = this.af.database.list('/Users', {
          query: {
            orderByChild: 'group',
            equalTo: this.groupKey
          }
        });
        this.positions = this.af.database.list('/Groups/' + this.groupKey + '/Positions');
        this.af.database.object('/Groups/' + this.groupKey + '/admin').take(1).subscribe(group => {
          this.groupAdmin = group.admin;
        });
      });
    });
  }



  ngOnDestroy() {
    this.users.subscribe().unsubscribe();
    this.positions.subscribe().unsubscribe();
  }

}

1 个答案:

答案 0 :(得分:3)

你必须重构你的ngOnDestroy方法,因为它是错误的,首先如果你在模板中使用async管道,你不需要取消订阅,如果你没有在ngOnInit内,您应为每个unsubscribe来电保存对subscription功能的引用,然后在ngOnDestroyyou can read more about it here)上调用它们。