Angular 2 的 Http 服务没有暴露 map() 和其他 RxJS 函数 [英] Angular 2's Http service not exposing map() and other RxJS functions

问题描述

有谁知道 alpha 45 和 alpha 48 之间的 http 是否有任何重大变化?我一直在四处寻找，但没有找到任何东西.我的问题是下面的代码在 Alpha 45 上运行良好.但是现在我已经升级到 Alpha 48 我得到一个 _this.http.post(...).map is not a function 当我尝试运行应用程序时出现错误消息.奇怪的是 IntelliSense 显示 http.post 正在返回一个 observable.这意味着地图功能应该可用.任何帮助，将不胜感激.谢谢！

Does anybody know if there's been any breaking changes to the http between alpha 45 and alpha 48? I've been searching around and I didn't find anything. My problem is that the code below was working perfectly on Alpha 45. But now that I've upgraded to Alpha 48 I am getting a _this.http.post(...).map is not a function error message when I try to run the application. The strange thing is that IntelliSense shows that http.post is returning an observable. Which means that the map function should be available. Any help would be appreciated. Thanks!

public Authenticate(username: string, password: string): Observable<boolean> {

    this.ResetAuthenticationValues();

    return Observable.create((subscriber: EventEmitter<string>) => { 

        let body: string = 'grant_type=password&username=' + username + '&password=' + password;
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        this.http.post('http://example.com', body, {headers: headers})
            .map(res => res.json())
            .subscribe(
                (data: DataResponse) => {
                    if (!data.error) {
                        this.accessToken = {access_token: data.access_token, token_type: data.token_type};
                        subscriber.next(this.isAuthenticated = true);                       
                    }
                    else
                        subscriber.error(this.isAuthenticated = false);
                },
                (err) => subscriber.error(err),
                () => subscriber.complete()
            );

        return () => { };
    });
} 

推荐答案

另一个更新 (咳咳，抱歉，忘了这个选项)

如果您想避免单独添加操作符，您可以通过执行导入完整的 Rx

If you want to avoid adding individually the operators you can import the full Rx by doing

import {Observable, Subject, ReplaySubject, etc...} from 'rxjs/Rx';

您将拥有所有操作员 :)

You'll have all the operators :)

更新 alpha 50 (08/12/2015)

Update alpha 50 (08/12/2015)

在 alpha 49 发布后不久，他们发布了 alpha 50.这个版本将 rxjs 升级到了 alpha 14.所以你会很好地去做

Shortly after alpha 49 was released, they released alpha 50. This version upgraded rxjs to alpha 14. So you'll good to go by doing

npm install angular2@latest
npm install rxjs@5.0.0-alpha.14

更新 alpha 49 (08/12/2015)

Update alpha 49 (08/12/2015)

截至目前 alpha 49 已经发布，并且没有改变，这意味着会留在时间.原来的答案仍然有效，有一些变化，rjxs 的路径改变了，所以应该如下:

As of now alpha 49 was released and this didn't change, which means this will remain in time. The original answer is still valid with a few changes, paths changed for rjxs, so it should be as follows :

System.config({
    paths: {
        'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js',
        'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js',
        'rxjs/*' : 'node_modules/rxjs/*.js'
    }
});

import 'rxjs/add/operator/map';

注意

这个版本完全需要 alpha 13 版本，所以如果在你的 package.json 中你已经有另一个版本，你必须删除它，安装 angular2，然后安装rjxs.

This version requires exactly the alpha 13 version, so if in your package.json you have already another version, you'll have to remove it, install angular2, and then install rjxs.

更新

CHANGELOG 已更新以显示这一点打破变化.@jeffbcross 的评论在 issue #5642 澄清了这个问题.

The CHANGELOG was updated to show this breaking change. There's a comment from @jeffbcross in issue #5642 that clarifies a LOT in this matter.

引用部分评论

模块化从一开始就是新 RxJS 项目的目标，直到最近我们才开始真正认真地考虑组合运算符，而不是依赖 Rx 的分层分布.

Modularity was a goal of the new RxJS project from the start, and it wasn't until recently that we started really getting serious about composing operators instead of relying on tiered distributions of Rx.

原答案

实际上 RxJS 和 Angular2 发生了重大变化.所以现在要使用像 map 这样的操作符，你必须单独导入它们.您可以在此拉取请求中看到更改.并且已经有一个关于您的问题的问题.

There was actually a breaking change regarding RxJS and Angular2. So now to use operators like map you have to import them separately. You can see the change in this pull request. And there's already an issue about your question.

我建议您坚持使用 alpha 47.但是对于需要并想知道解决方案是什么的每个人，例如在拉取请求中指定的，单独添加操作符.

I recommend you to stick to alpha 47. But to everyone who needs and want to know what the solution is, like in the pull request is specified, to add the operator separately.

你一定有这样的东西

import {Http, ...} ...;

// Component
constructor(http: Http) {
    http.get(...).map() // 'map' doesn't exist! Ouch!
}

要修复它，添加操作符(抱歉重复了很多次)并配置到 rxjs 的路径

To fix it, add the operator (sorry for repeating it so many times) and configure the paths to rxjs

注意

这必须使用 RxJS alpha 11 或 alpha 12 来完成(不要将它与 @reactivex/rxjs 混淆，现在它只是 rxjs).所以用

This must be done with RxJS alpha 11, or alpha 12 (don't confuse it with @reactivex/rxjs, now it's just rxjs). So install it with

npm install rxjs@5.0.0-alpha.11

或者只是 npm install rxjs 如果你想要最新的，虽然他们锁定 成为 alpha 11.

Or just npm install rxjs if you want the latest, although they lock it to be alpha 11.

在你的 System.config 中配置路径(注意这是我的配置，不一定是最好的，我假设你安装了 alpha 11)

Configure the paths in your System.config (note that this is my config, not necessarily the best and I'm assuming you installed alpha 11)

System.config({
    paths: {
        'rxjs/observable/*' : 'node_modules/rxjs/observable/*.js',
        'rxjs/operators/*' : 'node_modules/rxjs/operators/*.js',
        'rxjs/*' : 'node_modules/rxjs/*.js'
    }
});

配置完成后，可以按如下方式导入操作符

After you are done with the configuration, you can import the operator as follows

 import 'rxjs/operators/map';

仅此而已.您必须对每个操作员都这样做.所以我再说一遍，我建议你坚持使用 alpha 47，就像我在评论中告诉你的那样.稍后我会尝试用 plnkr 更新答案.

And that's all. You'll have to do that with every operator. So I repeat, I recommend you to stick to alpha 47, like I told you in the comment. I will try to update the answer later with a plnkr.

这篇关于Angular 2 的 Http 服务没有暴露 map() 和其他 RxJS 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！