離子2 HTTP請求不工作 - 角2

Question

嗨，我試圖做一個簡單的HTTP GET請求，但不能讓它離子v2的測試版工作...

這裏是我的app.js ：

import {App, Platform} from 'ionic-angular'; 
import {TabsPage} from './pages/tabs/tabs'; 
import {HTTP_BINDINGS} from 'angular2/http'; 


@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    providers: [HTTP_BINDINGS], 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
export class MyApp { 
    static get parameters() { 
    return [[Platform]]; 
    } 

    constructor(platform) { 
    this.rootPage = TabsPage; 

    platform.ready().then(() => { 

    }); 
    } 
} 

，這是我page1.js：

import {Page} from 'ionic-angular'; 
import {Http} from 'angular2/http'; 


@Page({ 
    templateUrl: 'build/pages/page1/page1.html' 
}) 

export class Page1 { 
    constructor(http:Http) { 

     this.mget = http.get("https://httpbin.org/ip") 
     .subscribe(data => { 
      var alert = Alert.create({ 
       title: "Your IP Address", 
       subTitle: data.json().origin, 
       buttons: ["close"] 
      }); 
      this.nav.present(alert); 
     }, error => { 
      console.log(JSON.stringify(error.json())); 
     }); 
    } 
} 

當添加的是http：HTTP來構造 - >構造函數（HTTP：HTTP）的整個應用程序在雲瀏覽器空白... 並且在控制檯中出現錯誤：

錯誤：無法找到模塊」 ../page1/page1"

我也Page1.js嘗試這樣：

export class Page1 { 
    constructor() { 

    } 

    makeGetRequest() { 
     this.http.get("https://httpbin.org/ip") 
     .subscribe(data => { 
      var alert = Alert.create({ 
       title: "Your IP Address", 
       subTitle: data.json().origin, 
       buttons: ["close"] 
      }); 
      this.nav.present(alert); 
     }, error => { 
      console.log(JSON.stringify(error.json())); 
      console.log('yolo') 
      alert('hello'); 
     }); 
    } 
} 

，然後調用makeGetRequest（）上（點擊）在page1.html 但它返回這些產生的異常：

例外：評估過程中的錯誤「單擊」

原始異常：類型錯誤：this.http未定義

請幫助！ :)

-.-。-。-。-。-。-。-。-。-。-。-。-。-。-。-。-。-.-

本IS THESOLUTION：

page1.js：

import {Page} from 'ionic-angular'; 
import {Http} from 'angular2/http'; 

@Page({ 
    templateUrl: 'build/pages/page1/page1.html' 
}) 

export class Page1 { 
    static get parameters(){ 
     return [Http]; 
     } 
    constructor(http) { 
     this.http = http; 

     this.mget = this.http.get("https://httpbin.org/ip") 
     .subscribe(data => { 
      console.log(data); 
     }, error => { 
      console.log('faild'); 
     }); 
    } 
} 

app.js：

import {App, Platform} from 'ionic-angular'; 
import {TabsPage} from './pages/tabs/tabs'; 
import { HTTP_PROVIDERS } from 'angular2/http'; 


@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    providers: [HTTP_PROVIDERS], 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
export class MyApp { 
    static get parameters() { 
    return [[Platform]]; 
    } 

    constructor(platform) { 
    this.rootPage = TabsPage; 

    platform.ready().then(() => { 

    }); 
    } 
} 

Answer 1

請試試這個

export class Page1 { 
    static get parameters(){ 
     return [Http]; 
     } 
    constructor(http) { 
     this.http = http; 
     this.mget = this.http.get("https://httpbin.org/ip") 
     .subscribe(data => { 
      var alert = Alert.create({ 
       title: "Your IP Address", 
       subTitle: data.json().origin, 
       buttons: ["close"] 
      }); 
      this.nav.present(alert); 
     }, error => { 
      console.log(JSON.stringify(error.json())); 
     }); 
    } 
} 

我會建議你寫裏面的GET請求一個單獨的服務並將其注入到您的頁面中。

也有一看這 - http://tphangout.com/?p=113

詳細和簡單的指令被給予有用於使從離子性2應用簡單的GET請求。

Answer 2

我相信你需要 import { HTTP_PROVIDERS } from 'angular2/http'; 在app.js，而不是HTTP_BINDINGS，改變providers: [HTTP_BINDINGS]到providers: [HTTP_PROVIDERS]

見Angular2 docs