Angular Http 請求資料

1.在app.module.ts中引入htpp：

import { HttpModule,JsonpModule } from '@angular/http';
(HttpModule子產品用于get,post方法; JsonpModule子產品用于jsonp請求)
           

2.在app.module.ts裡的 imports注入HttpModule,JsonpModule子產品：

@NgModule({
	  declarations: [
	    AppComponent,
	    HeaderComponent,
	    NewComponent
	  ],
	  imports: [
	    BrowserModule,
	    BrowserAnimationsModule,
	    FormsModule,
	    HttpClientModule,
	    //注入到這裡
	    HttpModule,
	    JsonpModule,
	    NgZorroAntdModule
	  ],
	  providers: [{ provide: NZ_I18N, useValue: zh_CN },StorageService],
	  bootstrap: [AppComponent]
})
           

3.還要在使用的檔案裡引入（這裡是new元件new.component.ts裡引用）：

import { Http,Jsonp } from '@angular/http';
           

4.還要在使用的檔案裡引入（這裡是new元件new.component.ts裡引用）：

import { Http,Jsonp,Headers} from '@angular/http';
注：這裡引入的是Http,Jsonp不加Module，app.module.ts中引入的是 HttpModule,JsonpModule
           

5.在檔案new.component.ts裡聲明到constructor構造函數參數裡：

export class NewComponent implements OnInit {
//可分别通過私有變量private聲明指派給自定義變量
  constructor(private http:Http,private jsonp:Jsonp) { }
	ngOnInit() {
  }
}
           

6.請求資料

import { Component, OnInit } from '@angular/core';
//post方法請求資料要引入Headers 
import { Http,Jsonp,Headers } from '@angular/http';  /*資料請求子產品*/

@Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
		
      public list:any[]; //聲明變量存放擷取的資料
      private headers = new Headers({'Content-Type': 'application/json'});
      constructor(private http:Http,private jsonp:Jsonp,) {   }
      ngOnInit() {
	      //初始化完成就執行jsonpData方法請求資料
	      	this. requestJsonpData()
      }
      
  //get請求資料
  
     requestData(){
        var _that=this;
    
        // alert('請求資料');
        var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        this.http.get(url).subscribe(function(data){
    
          //  console.log(JSON.parse(data['_body']));
    
           var list=JSON.parse(data['_body']);
          //  console.log(_that.list['result']);
    
           _that.list=list['result'];
           
        },function(err){
    
            console.log(err);
        })
      }
      

***//jsonp請求資料(可跨域）***

     requestJsonpData(){
    		// jsonp 必須得在url加回到  &callback=JSONP_CALLBACK
    		    var _that=this;
    		    var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK";
    		
    		    this.jsonp.get(url).subscribe(function(data){
    		       console.log(data);
    		      / _that.list=data['_body']['result'];
    		
    		    },function(err){
    		
    		        console.log(err);
    		    })
      }
      
    //post請求資料
      postData(){
    
        // 1.import { Http,Jsonp,Headers } from '@angular/http';   Headers 定義請求頭的
    
        //2.private headers = new Headers({'Content-Type': 'application/json'});
    	//3.post送出資料

	    var url="http://127.0.0.1:3000/dologin";
	
	    this.http.post(url,
	      JSON.stringify({"username":'zhangsan',"age":'20'}),
	      {headers:this.headers}).subscribe(function(data){
	
	        console.log(data);
	
	      },function(error){
	          console.log(error);
	      })
	  }
    }