如何取消订阅AngularFire数据库观察/订阅?

时间:2017-07-06 15:07:08

标签: firebase ionic2 angularfire angularfire2 ionic3

我想取消订阅我的Firebase数据库中某个位置的订阅。我正在使用Ionic 3和AngularFire2。

但是我不知道我的订阅是什么类型的数据类型,因为截至目前它是FirebaseObjectObservable<any>,这不是我可以取消订阅的内容。

在没有取消订阅的情况下,每当我尝试退出时(当我致电afAuth.auth.signOut()时),我都会遇到以下错误:

Runtime Error**
permission_denied at /parents/<auth.uid>: Client doesn't have permission to access the desired data.

Stack**
Error: permission_denied at /parents/<auth.uid>: Client doesn't have permission to access the desired data.
    at G (http://localhost:8100/build/main.js:36366:36)
    at Object.G (http://localhost:8100/build/main.js:36370:86)
    at Lg (http://localhost:8100/build/main.js:36342:98)
    at Ag.g.wd (http://localhost:8100/build/main.js:36335:310)
    at og.wd (http://localhost:8100/build/main.js:36325:364)
    at Yf.Xf (http://localhost:8100/build/main.js:36323:281)
    at ag (http://localhost:8100/build/main.js:36307:464)
    at WebSocket.Ia.onmessage (http://localhost:8100/build/main.js:36306:245)
    at WebSocket.o [as __zone_symbol___onmessage] (http://localhost:8100/build/polyfills.js:2:24340)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967)

因为它仍在尝试阅读它现在无法访问的内容,因为我没有通过身份验证。

我的Firebase规则:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

我的 home.ts 文件:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, FirebaseObjectObservable, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  //What datatype should I make this?
  profileResult: FirebaseObjectObservable<any>;

  constructor( public navCtrl: NavController,
               private db: AngularFireDatabase,
               private afAuth: AngularFireAuth ) {


  }

  ngOnInit() {
    //Get authentication state
    this.afAuth.authState.subscribe(
        (auth) => {

          //if authenticated, get profile information for db and display using profileResult
          if (auth != null) {
            this.db.object('/parents/' + auth.uid).subscribe(profileResult => {
              this.profileResult = profileResult;
              console.log(profileResult);
            });
          }
      });
  }

  /* What I would like to do, but can't unsubscribe from FirebaseObjectObservable
  ngOnDestroy() {
    this.profileResult.unsubscribe();
  } 
  */

  //calling this results in my error
  signOut() {
    this.afAuth.auth.signOut();
  }

}

我的 home.html 文件:

<ion-header>
  <ion-navbar>
    <ion-title>
      My Awesome App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

{{ profileResult?.firstName }}<br />
{{ profileResult?.lastName }}<br />
{{ profileResult?.youngestChildAge }}<br />
{{ profileResult?.interests }}<br />
{{ profileResult?.facebookUrl }}<br />
<button full ion-button (click)="signOut()">Sign Out</button>

</ion-content>

我可以将profileResult: FirebaseObjectObservable<any>;更改为同时捕获数据,还能取消订阅?

2 个答案:

答案 0 :(得分:1)

在您的情况下,您可以使用first运算符

    import 'rxjs/add/operator/first';
    this.db.object('/parents/' + auth.uid).first().subscribe(profileResult => {
    this.profileResult = profileResult;
    console.log(profileResult);

});

答案 1 :(得分:0)

你想取消订阅吗?

mySubscription : any;


mySubscription = this.db.object('/parents/' + auth.uid).subscribe(profileResult => {
    this.profileResult = profileResult;
    console.log(profileResult);

});


mySubscription.unsubscribe();