Как я могу подписаться на данные Firebase с помощью AngularFire2 при начальной загрузке маршрута?

Я использую angular-cli для создания приложения angularfire2.

У меня возникла проблема, когда при начальной загрузке дочернего подмаршрута angularfire2 выдает ошибку в консоли:

error_handler.js: 47 ИСКЛЮЧЕНИЕ: Неперехваченный (в обещании): TypeError: Не удается прочитать свойство «подписаться» на неопределенное

Это происходит, когда моя страница «обновляется». Если я перехожу от компонента и возвращаюсь к нему после обновления, данные загружаются нормально, и я не получаю сообщение об ошибке. Я не уверен, является ли это ошибкой с 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();
  }

}


angular angularfire2 angular2-router
person Luke Becker    schedule 22.11.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны реорганизовать свой метод ngOnDestroy, потому что он неверен, во-первых, если вы используете канал async внутри своего шаблона, вам не нужно отписываться, а если вы этого не сделаете, внутри вашего ngOnInit вы должны сохранить ссылку на функцию unsubscribe для каждого subscription позвоните, а затем позвоните им по ngOnDestroy(подробнее об этом можно прочитать здесь).

person Cleiton    schedule 22.11.2016
comment
Я только что удалил свой метод ngOnDestroy, так как он не нужен. Я вижу странное поведение, когда он теперь перенаправляется к родительскому компоненту при обновлении. - person Luke Becker; 23.11.2016
comment
Не обращайте внимания на последний комментарий, это из-за моего собственного глупого кода. - person Luke Becker; 23.11.2016
comment
Это исправило мою проблему. Большое спасибо. Кроме того, спасибо, что указали мне на эту статью. Это имеет смысл. - person Luke Becker; 23.11.2016