一、app.module.ts注册HTTP JSONP服务
1.引入HttpModule 、JsonpModule 普通的 HTTP 调用并不需要用到 JsonpModule，不过稍后我们就会演示对 JSONP 的支持， 所以现在就加载它，免得再回来改浪费时间。

import { HttpModule, JsonpModule } from '@angular/http';

2.HttpModule 、JsonpModule依赖注入

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    NewsComponent,
     NewscontentComponent 
],
 imports: [ 
    BrowserModule,
    FormsModule,
    HttpModule, 
    JsonpModule, 
    AppRoutingModule 
 ], 
providers: [
    StorageService,
    NewsService
],
 bootstrap: [AppComponent]
}) 

二、通过 Http、Jsonp请求数据、不用RxJs
RxJS是一种针对异步数据流编程工具，或者叫响应式扩展编程；不管如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。 app.module.ts引入并且依赖注入完成以后，在需要用到的地方执行下面操作。 使用Http、Jsonp：

1、在需要请求数据的地方引入 Http

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

2、构造函数内申明：

constructor(private http:Http,private jsonp:Jsonp) { }

3、对应的方法内使用http请求数据

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1") .subscribe(
     function(data){ console.log(data); },
　　  function(err){ console.log('失败'); }
 );