Angular 2替代订阅

时间:2017-07-24 15:52:54

标签: javascript angular firebase firebase-realtime-database

所以,我有以下代码:

  

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

我可以选择订阅吗?因为我知道它是实时的,它会弄乱我的代码。

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

完整代码

dynamic ds = (JArray)o["Tables"][0]["Rows"];
using(var connection = new SqlConnection(cnnString))
    {connection.Open();
     ds.Select(ja =>
        connection.Execute("INSERT INTO dbo.AddPlay(UserId, Timestamp, YoutubeId, Source, PlayCount, Rating) " + 
                " VALUES(ja(0).Value<string>(), ja(1).Value<string>() ja(2).Value<string>(), ja(3).Value<string>(), GetInt(ja(4)), GetInt(ja(5)))"));
    }

1 个答案:

答案 0 :(得分:1)

包含Observable / Subscribe的组件的后续加载时的异常错误可能是订阅Observables而不是在销毁组件时取消订阅的结果,因此订阅仍然存在,并且当组件再次加载时,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);
    }
});