如何在初始路由加载时使用 AngularFire2 订阅 Firebase 数据?
How Can I Subscribe To Firebase data using AngularFire2 on initial route load?
我正在使用 angular-cli 构建一个 angularfire2 应用程序。
我遇到一个问题,在初始子路径加载时,angularfire2 在控制台中抛出错误:
error_handler.js:47 异常:未捕获(承诺):TypeError:无法读取未定义的 属性 'subscribe'
我的页面 "refreshes" 时会发生这种情况。如果我离开组件并在刷新后返回到它,则数据加载正常并且我没有收到错误。我不确定这是 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();
}
}
你必须重构你的 ngOnDestroy
方法,因为它是错误的,首先如果你在你的模板中使用 async
管道你不需要取消订阅,如果你不这样做,在里面您的 ngOnInit
您应该为每个 subscription
调用保存对 unsubscribe
函数的引用,然后在 ngOnDestroy
(you can read more about it here).
上调用它们
我正在使用 angular-cli 构建一个 angularfire2 应用程序。
我遇到一个问题,在初始子路径加载时,angularfire2 在控制台中抛出错误:
error_handler.js:47 异常:未捕获(承诺):TypeError:无法读取未定义的 属性 'subscribe'
我的页面 "refreshes" 时会发生这种情况。如果我离开组件并在刷新后返回到它,则数据加载正常并且我没有收到错误。我不确定这是 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();
}
}
你必须重构你的 ngOnDestroy
方法,因为它是错误的,首先如果你在你的模板中使用 async
管道你不需要取消订阅,如果你不这样做,在里面您的 ngOnInit
您应该为每个 subscription
调用保存对 unsubscribe
函数的引用,然后在 ngOnDestroy
(you can read more about it here).