标签: rxjs

有人可以解释Angular Promise和之间的区别Observable吗？

每个例子都有助于理解这两种情况.在什么情况下我们可以使用每个案例？

我应该何时存储Subscription实例并unsubscribe()在NgOnDestroy生命周期中调用,何时可以忽略它们？

保存所有订阅会在组件代码中引入很多混乱.

HTTP客户端指南忽略这样的订阅:

getHeroes() {
  this.heroService.getHeroes()
                   .subscribe(
                     heroes => this.heroes = heroes,
                     error =>  this.errorMessage = <any>error);
}

同时," 航线与导航指南"说:

最终,我们会在其他地方导航.路由器将从DOM中删除此组件并将其销毁.在此之前我们需要自己清理.具体来说,我们必须在Angular破坏组件之前取消订阅.如果不这样做可能会造成内存泄漏.

我们取消订阅我们Observable的ngOnDestroy方法.

private sub: any;

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let id = +params['id']; // (+) converts string 'id' to a number
     this.service.getHero(id).then(hero => this.hero = hero);
   });
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

我正在研究Angular RxJs模式,我不明白a BehaviorSubject和a之间的区别Observable.

根据我的理解,a BehaviorSubject是一个可以随时间变化的值(可以订阅,订阅者可以接收更新的结果).这似乎是一个完全相同的目的Observable.

你什么时候使用Observablevs BehaviorSubject？使用BehaviorSubjectover Observable或反之亦然有好处吗？

我在Angular中遇到HTTP问题.

我只想要GET一个JSON列表并在视图中显示它.

服务类

import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
    }
}

在HallListComponent我getHalls从服务中调用方法:

export class HallListComponent implements OnInit {
    public halls:Hall[];
    public _selectedId:number;

    constructor(private _router:Router,
                private _routeParams:RouteParams,
                private _service:HallService) {
        this._selectedId = +_routeParams.get('id');
    }

    ngOnInit() {
        this._service.getHalls().subscribe((halls:Hall[])=>{ 
            this.halls=halls;
        });
    }
}

但是,我有一个例外:

TypeError:this.http.get(...).map不是[null]中的函数 …

通过使用Http,我们调用一个执行网络调用并返回http observable的方法:

getCustomer() {
    return this.http.get('/someUrl').map(res => res.json());
}

如果我们采用这个可观察的并添加多个订阅者:

let network$ = getCustomer();

let subscriber1 = network$.subscribe(...);
let subscriber2 = network$.subscribe(...);

我们想要做的是确保这不会导致多个网络请求.

这可能看起来像是一个不寻常的场景,但实际上很常见:例如,如果调用者订阅了observable以显示错误消息,并使用异步管道将其传递给模板,那么我们已经有两个订阅者.

在RxJs 5中这样做的正确方法是什么？

也就是说,这似乎工作正常:

getCustomer() {
    return this.http.get('/someUrl').map(res => res.json()).share();
}

但这是在RxJs 5中这样做的惯用方式,还是我们应该做其他事情呢？

注意:根据Angular 5 new HttpClient,.map(res => res.json())所有示例中的部分现在都没用,因为现在默认采用JSON结果.

我刚刚从Angular 2 beta16升级到beta17,后者又需要rxjs 5.0.0-beta.6.(更改日志:https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28)在beta16中,所有关于Observable/map功能的都很好.升级后出现以下错误,当typescript尝试转换时出现:

1. 类型'Observable'上不存在属性'map'(我在地图中使用了带有observable的地图)
2. c:/path/node_modules/rxjs/add/operator/map.d.ts(216):error TS2435:Ambient模块不能嵌套在其他模块或名称空间中.
3. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16):错误TS2436:环境模块声明无法指定相对模块名称.

我已经看到了这个问题/答案,但它没有解决问题: Angular2 beta.12和RxJs 5 beta.3的可观察错误

我的appBoot.ts看起来像这样(我已经引用了rxjs/map):

///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
[stuff]
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {enableProdMode} from 'angular2/core';
import { Title } from 'angular2/platform/browser';


//enableProdMode();
bootstrap(AppDesktopComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

有人知道发生了什么事吗？

我不清楚Subject和BehaviorSubject之间的区别.是否只是BehaviorSubject具有getValue函数？

您是否需要取消订阅Angular 2 http调用以防止内存泄漏？

 fetchFilm(index) {
        var sub = this._http.get(`http://example.com`)
            .map(result => result.json())
            .map(json => {
                dispatch(this.receiveFilm(json));
            })
            .subscribe(e=>sub.unsubscribe());
            ...

我Observable.of在项目中导入函数时遇到问题.我的Intellij看到了一切.在我的代码中,我有:

import {Observable} from 'rxjs/Observable';

在我的代码中我使用它:

return Observable.of(res);

有任何想法吗？

现在,我有一个初始页面,其中有三个链接.点击最后的"朋友"链接后,会启动相应的朋友组件.在那里,我想获取/获取我的朋友的列表进入friends.json文件.直到现在一切正常.但我仍然是使用RxJs的observables,map,subscribe concept的angular2的HTTP服务的新手.我试图理解它并阅读一些文章,但在我开始实际工作之前,我不会理解这些概念.

在这里,我已经制作了除HTTP相关工作之外的plnkr.

Plnkr

myfriends.ts

 import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
 import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
 import 'rxjs/Rx';
 @Component({
    template: `
    <h1>My Friends</h1>
    <ul>
      <li *ngFor="#frnd of result">
          {{frnd.name}} is {{frnd.age}} years old.
      </li>
    </ul>
    `,
    directive:[CORE_DIRECTIVES]
  })

  export class FriendsList{

      result:Array<Object>; 
      constructor(http: Http) { 
        console.log("Friends are being called");

       // below code is new for me. So please show me correct way how to do it and please explain about .map and .subscribe functions and observable pattern.

        this.result = http.get('friends.json')
                      .map(response => …