需要用到请求数据的地方引入 Http 模块 Jsonp 模块，以及 rxjs 
 
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其
目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。 
 
大部分 RxJS 操作符都不包括在 Angular的 Observable 基本实现中，基本实现只包括
Angular 本身所需的功能。 
如果想要更多的 RxJS 功能，我们必须导入其所定义的库来扩展 Observable 对象， 以下
是这个模块所需导入的所有 RxJS 操作符：

而在angular6中，rxjs使用方法有所变化，下面是我得使用经验

// 使用rxjs
import { Observable } from 'rxjs'
// import 'rxjs/RX'
import { map } from 'rxjs/operators';

  // 注入依赖服务// 构造函数内部声明，私有化，实例化constructor(private http: Http, private jsonp: Jsonp) {

 GET请求写法有所变化

  requestData() {// alert('请求数据')var that = this;var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";// this.http.get(url).subscribe(function (data) {// this.http.get(url).map(res=>res.json())    将返回的数据转换成jsonthis.http.get(url).pipe(map(res => res)).subscribe(function (data) {// console.log(JSON.parse(data['_body']))var list = JSON.parse(data['_body'])that.list5 = list['result']console.log(that.list5)}, function (err) {console.log(err)})}

 

 JSONP请求方式也有所变化

  requestJsonpData() {// alert('请求数据')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) {this.jsonp.get(url).pipe(map(res => res)).subscribe(function (data) {// console.log(JSON.parse(data['_body']))console.log(data['_body'])// 此处不需要进行字符串解析var list = data['_body']that.list5 = list['result']console.log(that.list5)}, function (err) {console.log(err)})}

附上完整的代码

import { Component, OnInit } from '@angular/core';
import { Http, Jsonp, Headers } from '@angular/http';
// 使用rxjs
import { Observable } from 'rxjs'
// import 'rxjs/RX'
import { map } from 'rxjs/operators';
@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {title = '你还news' // 定义属性msg: any // 另一种定义属性的方法msg1: string = '这是string类型的数据'// 定义属性还可以加修饰符public username = '张三'public h = ''public list = []public obj = {name: '张三'}public list2 = []public list4: any[]public list5: any[]private headers = new Headers({ 'Content-Type': 'application/json' })/*** public 共有 * 默认 可以在这个类里面使用，也可以在类外面使用* protected 保护类型  他只有在当前类和他的子类里面可以访问* private 私有 只有在当前类型才可以访问这个属性*/// 注入依赖服务// 构造函数内部声明，私有化，实例化constructor(private http: Http, private jsonp: Jsonp) {this.h = '<h2>后台数据</h2>'this.list = ['1', '2', '3']this.list2 = [{ 'title': '111' },{ 'title': '222' },{ 'title': '333' }]this.list4 = [{'catename': "宝马","list": [{ 'title': '宝马x1' },{ 'title': '宝马x3' },{ 'title': '宝马x2' },{ 'title': '宝马x4' },]}, {'catename': "奥迪","list": [{ 'title': '奥迪q1' },{ 'title': '奥迪q2' },{ 'title': '奥迪q3' },{ 'title': '奥迪q4' },]},]}ngOnInit() {}requestData() {// alert('请求数据')var that = this;var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";// this.http.get(url).subscribe(function (data) {// this.http.get(url).map(res=>res.json())    将返回的数据转换成jsonthis.http.get(url).pipe(map(res => res)).subscribe(function (data) {// console.log(JSON.parse(data['_body']))var list = JSON.parse(data['_body'])that.list5 = list['result']console.log(that.list5)}, function (err) {console.log(err)})}requestJsonpData() {// alert('请求数据')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) {this.jsonp.get(url).pipe(map(res => res)).subscribe(function (data) {// console.log(JSON.parse(data['_body']))console.log(data['_body'])// 此处不需要进行字符串解析var list = data['_body']that.list5 = list['result']console.log(that.list5)}, function (err) {console.log(err)})}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);})}
}