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

时间:2016-01-04 01:40:02

标签: javascript angular ionic2

我有一个离子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。因此,它的构造函数将运行,它将触发http.get构造函数中的UserProvider函数。然后,我应该在浏览器网络选项卡中看到网络呼叫。

但是,我收到了这个错误:

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');
        });

但是这会引发类似的错误。

1 个答案:

答案 0 :(得分:2)

在angular2-beta0 http.get()已经返回Observable,您不需要调用其以前的.toRx()方法,只需直接调用.map()即可这样。