1.在需要使用rxjs的页面引入

import {Observable} from "rxjs";
import 'rxjs/Rx';
//npm install rxjs-compat //版本兼容可以执行这个命令

2.ts代码如下：

import { Component, OnInit } from '@angular/core';
import {Http,Jsonp} from "@angular/http";

//使用rxjs
import {Observable} from "rxjs";
import 'rxjs/Rx';
//npm install rxjs-compat //版本兼容

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
list=[];
  constructor(private http:Http,private jsonp:Jsonp) { }

  ngOnInit() {
  }

   rxjsMsg(){

    var _that = this;
     // alert('请求数据');
      var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK";
      this.jsonp.get(url).map(res=>res.json())  /*返回的数据转换成json*/
      .subscribe(function(data){

          console.log(data);
          _that.list = data.result;

      },function(err){

          console.log(err);
      })
  }

}

2.html代码如下，和上一节共用：

<h2>
  home works!ttt
</h2>
<br>
<button (click)="getMsg()">getmsg</button>
<br>
<hr>
<button (click)="jsonpMsg()">jsonpMsg</button>
<hr><br>
<hr>
<button (click)="postMsg()">postMsg</button>
<hr><br>

<button (click)="rxjsMsg()">rxjsMsg</button>
<hr><br>


<ul>
  <li *ngFor="let item of list">
    {{item.title}}
  </li>
</ul>