Ionic 2 - 导入/注入 Angular 2 HTTP 组件答案

【问题标题】：Ionic 2 - Importing/Injecting Angular 2 HTTP ComponentIonic 2 - 导入/注入 Angular 2 HTTP 组件
【发布时间】：2016-01-04 01:40:01
【问题描述】：

我有一个 ionic 2 应用程序，我一直在使用本地数据进行测试。现在，我正在尝试向我的 api 发出一些 Ajax 请求以获取数据。

在我的app.js 文件中，我这样定义我的组件：

import {UserProvider} from './providers/user-provider';
...
    @App({
      templateUrl: 'build/app.html',
      providers: [UserProvider]
    })

然后，我的user-provider.js 文件定义如下：

import {Injectable} from 'angular2/core';
import {Http, httpInjectables} from 'angular2/http';

@Injectable()
export class UserProvider {
    constructor(http: Http) {
        http.get('www.someURL.com').toRx().map(res => res.json())
            .subscribe(data => console.log(data));
    }
}

然后，最后，我正在使用我的 signup.js 文件初始化我的“注册”视图：

import {Page, NavController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {UserProvider} from '../../providers/user-provider';

@Page({
  templateUrl: 'build/pages/signup/signup.html'
})
export class SignupPage {
  constructor(nav: NavController, userProvider: UserProvider) {
    this.userProvider = userProvider;
    this.nav = nav;
  }
}

我的预期结果是，在我的注册视图初始化时，UserProvider 将被注入。因此，它的构造函数将运行，这将在UserProvider 的构造函数中触发http.get 函数。然后我应该会在我的浏览器网络选项卡中看到一个网络调用。

但是，我收到了这个错误：

EXCEPTION: Error during instantiation of UserProvider! (SignupPage -> UserProvider)

app.bundle.js:33693 TypeError: http.get(...).toRx is not a function
    at new UserProvider (app.bundle.js:60706)

为什么http.get.toRx() 会导致错误？我最初尝试过这样的承诺：

http.get('www.someURL.com').then(() => {
            console.log('test');
        });

但这会引发类似的错误。

【问题讨论】：

标签： javascript angular ionic2

【解决方案1】：

在angular2-beta0中http.get()已经返回一个Observable，你不需要调用它之前的.toRx()方法，你可以直接调用.map()等等。

【讨论】：

有趣 - 所以，直接调用 .map 会给我这个错误：TypeError: http.get(...).map is not a function http 组件的导入有问题吗？它是否应该包含在其他地方？我最初认为它必须包含在 bootstrap 函数调用中，但我的 ionic (cordova) 应用程序不使用 bootstrap 函数。
.map() Rx 函数可能必须被导入。有关更多信息，请参阅stackoverflow.com/questions/34581471/… 的答案。如果其他一切设置正确，import 'rxjs/add/operator/map'; 可能就足够了。