标签: rxjs

将承诺转换为可观察的

我试图围绕着可观察者.我喜欢observables解决开发和可读性问题的方式.在我读到的时候,好处是巨大的.

关于HTTP和集合的可观察量似乎是直截了当的.我怎样才能将这样的东西转换为可观察的模式.

这是来自我的服务组件,用于提供身份验证.我希望它能像Angular2中的其他HTTP服务一样工作 - 支持数据,错误和完成处理程序.

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(firebaseUser) {
    // do something to update your UI component
    // pass user object to UI component
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
Run Code Online (Sandbox Code Playgroud)

这里的任何帮助将不胜感激.我唯一的替代解决方案是创建EventEmitters.但我想这是在服务部门做事的一种可怕方式

rxjs firebase firebase-authentication angular

162
推荐指数
4
解决办法
10万
查看次数

如何获取RxJS Subject或Observable的当前值?

我有一个Angular 2服务:

import {Storage} from './storage';
import {Injectable} from 'angular2/core';
import {Subject}    from 'rxjs/Subject';

@Injectable()
export class SessionStorage extends Storage {
  private _isLoggedInSource = new Subject<boolean>();
  isLoggedIn = this._isLoggedInSource.asObservable();
  constructor() {
    super('session');
  }
  setIsLoggedIn(value: boolean) {
    this.setItem('_isLoggedIn', value, () => {
      this._isLoggedInSource.next(value);
    });
  }
}
Run Code Online (Sandbox Code Playgroud)

一切都很好.但我有另一个不需要订阅的组件,它只需要在某个时间点获取isLoggedIn的当前值.我怎样才能做到这一点?

javascript rxjs angular

160
推荐指数
4
解决办法
13万
查看次数

创建一次性订阅

我需要创建一个Observable在第一次调用时立即处理的订阅.

是否有类似的东西:

observable.subscribeOnce(func);
Run Code Online (Sandbox Code Playgroud)

我的用例,我在快速路由处理程序中创建订阅,并且每个请求多次调用订阅.

rxjs

152
推荐指数
3
解决办法
6万
查看次数

如何在rxjs中返回一个空的observable

该函数more()应该Observable从get请求返回一个

export class Collection{

    public more = (): Observable<Response> => {
       if (this.hasMore()) {

         return this.fetch();
       }
       else{
         // return empty observable
       }
    }

    private fetch = (): Observable<Response> => {
       return this.http.get('some-url').map(
          (res) => {
              return res.json();
          }
       );
    }
}
Run Code Online (Sandbox Code Playgroud)

在这种情况下,我只能做一个请求,如果hasMore()是真的,否则我在subscribe()函数上得到一个错误subscribe is not defined,我怎么能返回一个空的observable?

this.collection.more().subscribe(
   (res) =>{
       console.log(res);
   },
   (err) =>{
       console.log(err);
   }
)
Run Code Online (Sandbox Code Playgroud)

更新

在RXJS 6中

import { EMPTY } from 'rxjs'

return EMPTY; 
Run Code Online (Sandbox Code Playgroud)

javascript observable rxjs typescript

139
推荐指数
9
解决办法
11万
查看次数

Angular - "没有导出的成员'Observable'"

码

错误信息

打字稿代码:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

}
Run Code Online (Sandbox Code Playgroud)

错误信息:

错误TS2307:找不到模块'rxjs-compat/Observable'.node_modules/rxjs/observable/of.d.ts(1,15):错误TS2307:找不到模块'rxjs-compat/observable/of'.src/app/hero.service.ts(2,10):错误TS2305:模块'"F:/ angular-tour-of-heroes/node_modules/rxjs/Observable"'没有导出成员'Observable'.src/app/hero.service.ts(15,12):错误TS2304:找不到名称'of'.

package.json Angular版本的文件:

版

rxjs typescript angular angular6 rxjs6

138
推荐指数
8
解决办法
14万
查看次数

如何关闭外部点击的下拉菜单?

当用户点击该下拉菜单之外的任何地方时,我想关闭我的登录菜单下拉菜单,我想用Angular2和Angular2"方法"来做...

我已经实施了一个解决方案,但我真的对它没有信心.我认为必须有一种最简单的方法来实现相同的结果,所以如果你有任何想法......让我们讨论:)!

这是我的实现:

下拉组件:

这是我的下拉列表的组件:

  • 每次将此组件设置为可见时(例如:当用户单击按钮以显示它时),它会订阅存储在SubjectsService中的"全局"rxjs主题userMenu.
  • 每次隐藏时,它都会取消订阅此主题.
  • 该组件的模板中的任何位置的每次单击都会触发onClick()方法,该方法只是将事件冒泡停止到顶部(和应用程序组件)

这是代码

export class UserMenuComponent {

    _isVisible: boolean = false;
    _subscriptions: Subscription<any> = null;

    constructor(public subjects: SubjectsService) {
    }

    onClick(event) {
        event.stopPropagation();
    }

    set isVisible(v) {
        if( v ){
            setTimeout( () => {
this._subscriptions =  this.subjects.userMenu.subscribe((e) => {
                       this.isVisible = false;
                       })
            }, 0);
        } else {
            this._subscriptions.unsubscribe();
        }
        this._isVisible = v;
    }

    get isVisible() {
        return this._isVisible;
    }
}
Run Code Online (Sandbox Code Playgroud)

应用程序组件:

另一方面,有应用程序组件(它是下拉组件的父级):

  • 此组件捕获每个单击事件并在相同的rxjs上发出主题(userMenu)

这是代码: …

javascript rxjs drop-down-menu angular

129
推荐指数
9
解决办法
12万
查看次数

RxJs来自vs的可观察对象

Observable.ofObservable.from参数格式之间的唯一区别是什么?喜欢Function.prototype.callFunction.prototype.apply

Observable.of(1,2,3).subscribe(() => {})
Observable.from([1,2,3]).subscribe(() => {})
Run Code Online (Sandbox Code Playgroud)

rxjs

125
推荐指数
7
解决办法
4万
查看次数

RxJS:我如何"手动"更新Observable?

我认为我必须误解一些基本的东西,因为在我看来,这应该是一个可观察的最基本的案例,但对于我的生活,我无法弄清楚如何从文档中做到这一点.

基本上,我希望能够做到这一点:

// create a dummy observable, which I would update manually
var eventObservable = rx.Observable.create(function(observer){});
var observer = eventObservable.subscribe(
   function(x){
     console.log('next: ' + x);
   }
...
var my_function = function(){
  eventObservable.push('foo'); 
  //'push' adds an event to the datastream, the observer gets it and prints 
  // next: foo
}
Run Code Online (Sandbox Code Playgroud)

但是我找不到像这样的方法push.我正在使用它作为点击处理程序,我知道他们已经Observable.fromEvent为此,但我正在尝试将它与React一起使用,而我宁愿只能在回调中更新数据流,而不是使用完全不同的事件处理系统.基本上我想要这个:

$( "#target" ).click(function(e) {
  eventObservable.push(e.target.text()); 
});
Run Code Online (Sandbox Code Playgroud)

我得到的最接近的是使用observer.onNext('foo'),但这似乎并没有真正发挥作用,并且这是在观察者身上调用的,这似乎并不正确.观察者应该是对数据流作出反应的东西,而不是改变它,对吧?

我只是不理解观察者/可观察的关系吗?

reactive-programming rxjs

124
推荐指数
2
解决办法
7万
查看次数

类型'Observable <any>'中不存在属性'catch'

在Angular 2文档页面上有一个使用Http服务的例子.

getHeroes (): Observable<Stuff[]> {
  return this.http.get(this.url)
                  .map(this.extractData)
                  .catch(this.handleError);
}
Run Code Online (Sandbox Code Playgroud)

我克隆了angular2-webpack-starter项目并自己添加了上面的代码.

我导入Observable使用

import {Observable} from 'rxjs/Observable';
Run Code Online (Sandbox Code Playgroud)

我假设属性Observable也被导入(.map有效).查看rxjs.beta-6的更改日志,没有提到任何内容catch.

javascript rxjs typescript angular

120
推荐指数
3
解决办法
8万
查看次数

node_modules/rxjs/internal/types.d.ts(81,44):错误TS1005:';' 安装Angular 6后出现预期错误

__CODE__安装Angular 6后出现错误.

检查错误:

ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.
Run Code Online (Sandbox Code Playgroud)

installation build rxjs typescript angular

118
推荐指数
5
解决办法
6万
查看次数