javascript - Angular 2 替代订阅

Question

所以，我有以下代码:

this.firebase.database.list('/schedule',{query: {orderByChild: 'user_day',equalTo: this.currentUser.uid+'_'+day }}) .subscribe(data => {

还有其他订阅方式吗？我可以吗？因为我知道它是实时的，它会弄乱我的代码。

我想做的是，如果数据库中存在一个键，我需要知道是否需要更新或插入，但使用我当前的代码，它会在 2-3 次更新后中断，我认为这是因为订阅。

完整代码

var schedule = this.firebase.database.list('/schedule');

this.firebase.database.list('/schedule',{query: {orderByChild: 'user_day',equalTo: this.currentUser.uid+'_'+day }})
.subscribe(data => {
    if(data.length == 0){
        //insert
        schedule.push({from : from, to : to, user_id : this.currentUser.uid, user_day: this.currentUser.uid+'_'+day,day : day});
    }else{
        //update
        schedule.update(data[0].$key,{from : from, to : to});
        console.log(from,to);
    }
});

Answer 1

后续加载包含 Observable/Subscribe 的组件时出现异常错误可能是由于订阅了 Observable 而在销毁组件时没有取消订阅，因此订阅仍然存在，并且当组件再次加载时，Observable 会响应多个次组件请求。这些订阅会累积。

为了防止这种情况发生，并防止内存泄漏，您应该在销毁每个组件时取消订阅 Observable。

将这些导入添加到您的组件中

import 'rxjs/add/operator/takeUntil';
import { Subject } from 'rxjs/Subject';

将其添加到您的类中 - 我通常在构造函数之上执行此操作。

  private ngUnsubscribe: Subject<any> = new Subject<any>()

添加 ngOnDestroy 函数

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

然后将其添加到您的 .subscribe 之前(您应该在具有多个组件的每个 .subscribe 之前使用此精确语法)。

  .takeUntil(this.ngUnsubscribe)

所以在你的情况下，它看起来像这样。

this.firebase.database.list('/schedule',{query: {orderByChild: 'user_day',equalTo: this.currentUser.uid+'_'+day }})
.takeUntil(this.ngUnsubscribe)
.subscribe(data => {
    if(data.length == 0){
        //insert
        schedule.push({from : from, to : to, user_id : this.currentUser.uid, user_day: this.currentUser.uid+'_'+day,day : day});
    }else{
        //update
        schedule.update(data[0].$key,{from : from, to : to});
        console.log(from,to);
    }
});

因此，订阅将保持事件状态，直到您离开该组件，此时 ngOnDestroy 会触发，从而彻底取消订阅 Observable。

看看这是否可以解决您在多次更新后遇到的问题。

Observables 是一个很棒的功能，虽然有一些奇怪的问题(比如这个)一开始可能会令人沮丧，但一旦你对它们进行了排序，你可能会爱上它们。

根据您的控制台日志，您似乎正在获取持续的数据流，在这种情况下，您可以使用 take(x) 运算符从 Observable 中获取单个值。

import 'rxjs/add/operator/take'

然后在.subscribe之前添加.take(1)

所以在你的情况下，它看起来像这样。

this.firebase.database.list('/schedule',{query: {orderByChild: 'user_day',equalTo: this.currentUser.uid+'_'+day }})
.takeUntil(this.ngUnsubscribe)
.take(1)
.subscribe(data => {
    if(data.length == 0){
        //insert
        schedule.push({from : from, to : to, user_id : this.currentUser.uid, user_day: this.currentUser.uid+'_'+day,day : day});
    }else{
        //update
        schedule.update(data[0].$key,{from : from, to : to});
        console.log(from,to);
    }
});