我试图围绕着可观察者.我喜欢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.但我想这是在服务部门做事的一种可怕方式
我有一个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的当前值.我怎样才能做到这一点?
我需要创建一个Observable在第一次调用时立即处理的订阅.
是否有类似的东西:
observable.subscribeOnce(func);
Run Code Online (Sandbox Code Playgroud)
我的用例,我在快速路由处理程序中创建订阅,并且每个请求多次调用订阅.
该函数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) 打字稿代码:
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版本的文件:
当用户点击该下拉菜单之外的任何地方时,我想关闭我的登录菜单下拉菜单,我想用Angular2和Angular2"方法"来做...
我已经实施了一个解决方案,但我真的对它没有信心.我认为必须有一种最简单的方法来实现相同的结果,所以如果你有任何想法......让我们讨论:)!
这是我的实现:
这是我的下拉列表的组件:
这是代码
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)
另一方面,有应用程序组件(它是下拉组件的父级):
这是代码: …
Observable.of和Observable.from参数格式之间的唯一区别是什么?喜欢Function.prototype.call和Function.prototype.apply?
Observable.of(1,2,3).subscribe(() => {})
Observable.from([1,2,3]).subscribe(() => {})
Run Code Online (Sandbox Code Playgroud) 我认为我必须误解一些基本的东西,因为在我看来,这应该是一个可观察的最基本的案例,但对于我的生活,我无法弄清楚如何从文档中做到这一点.
基本上,我希望能够做到这一点:
// 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'),但这似乎并没有真正发挥作用,并且这是在观察者身上调用的,这似乎并不正确.观察者应该是对数据流作出反应的东西,而不是改变它,对吧?
我只是不理解观察者/可观察的关系吗?
在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.
__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) rxjs ×10
angular ×6
javascript ×4
typescript ×4
angular6 ×1
build ×1
firebase ×1
installation ×1
observable ×1
rxjs6 ×1