Angular基础知识学习（二）

时间 2020-04-22

原文原文链接

服务数据持久化到localStroage生命周期父子组件之间通讯传值父组件经过@Input给子组件传值子组件经过ViewChild给父组件传值子组件经过Output给父组件传值父子组件相互通讯Rxjs异步数据流编程介绍回调函数事件监听PromiseRxjs数据交互（Get,Post,jsonp）Get获取数据Post获取数据jsonp获取数据第三方模块axios获取数据javascript

服务

建立服务以后，咱们在 StorageService.service.ts 中定义一个测试方法：css

export class StorageService {

  constructor() {

  }

  test() {
    alert('调用服务方法');
  }
}
复制代码

咱们从新创建一个 home 组件，来测试服务调用。html

<p>home works!</p>

<button (click)="getService()">获取服务</button>
复制代码

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../../services/storage.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(public storage: StorageService) { }

  ngOnInit(): void {
  }

  getService() {
    this.storage.test();
  }

}
复制代码

测试：java

数据持久化到localStroage

以前的 search 和 todoList 测试案例当页面刷新数据都会消失，接下来咱们在 service 里构建数据持久化方法（实际是存放到浏览器的 localStroage 中）。jquery

首先在 StorageService.service.ts 定义三个方法：ios

  set(key: string, value: string[]) {
    // @ts-ignore
    localStorage.setItem(key, JSON.stringify(value));
  }

  get(key: string) {
    return JSON.parse(localStorage.getItem(key));
  }

  remove(key: string) {
    localStorage.removeItem(key);
  }
复制代码

在组件中调用服务里定义的方法：git

import {Component, OnInit} from '@angular/core';
import {StorageService} from '../../services/storage.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  keyWord: any = '';

  keyWordsOld: any[] = [];

  product: any = '';
  products: any[] = [];

  constructor(public storage: StorageService) {
  }

  // 在初始化方法中查询localStorage中是否有数据
  ngOnInit(): void {
    // tslint:disable-next-line:prefer-const
    let serchList = this.storage.get('serchList');
    // tslint:disable-next-line:prefer-const
    let todoList = this.storage.get('todoList');
    if (serchList) {
      // @ts-ignore
      this.keyWordsOld = serchList;
    }
    if (todoList) {
      this.products = todoList;
    }
  }

  //输入内容后回车触发该方法
  keyup(e) {
    if (e.keyCode === 13){
      //首先判断搜索内容是否重复，若为新则加入
      if (this.keyWordsOld.indexOf(this.keyWord) === -1) {
        this.keyWordsOld.push(this.keyWord);

        this.storage.set('serchList', this.keyWordsOld);
      }
      this.keyWord = '';
    }
  }

  //搜索按钮绑定的方法
  search() {
    if (this.keyWordsOld.indexOf(this.keyWord) == -1) {
      this.keyWordsOld.push(this.keyWord);

      this.storage.set('serchList', this.keyWordsOld);
    }
    this.keyWord = '';
  }

  //删除按钮绑定的方法
  delete(key) {
    this.keyWordsOld.splice(key, 1);
    this.storage.set('serchList', this.keyWordsOld);
  }

  //回车事件，触发该方法
  add(e) {
    // tslint:disable-next-line:triple-equals
    if (e.keyCode == 13) {
      if (!this.equalProduct(this.products, this.product)) {
        this.products.push({
          title: this.product,
          status: 0
        });
        this.product = '';
        this.storage.set('todoList', this.products);
      } else {
        alert('数据已存在');
        this.product = '';
      }
    }
  }

  deleteWay(key) {
    this.products.splice(key, 1);
    this.storage.set('todoList', this.products);
  }

  //新增数据前与已有记录进行比对
  equalProduct(products: any[], value: any) {

    if (!value || value === '') {
      return false;
    }

    // tslint:disable-next-line:prefer-for-of
    for (let i = 0; i < products.length; i++) {
      // tslint:disable-next-line:triple-equals
      if (products[i].title == value) {
        return true;
      }
    }
    return false;
  }

  //change事件用来更新缓存中的内容
  change() {
    this.storage.set('todoList', this.products);
  }
}
复制代码

html 文件基本不变，测试效果：github

注意观察下方 localStorage 中的内容，当页面刷新以后数据仍然存在。web

生命周期

指令和组件的实例有一个生命周期：当 Angular 新建、更新和销毁它们时触发。经过实现一个或多个 Angular core 库里定义的生命周期钩子接口，开发者能够介入该生命周期中的这些关键时刻。npm

每一个接口都有惟一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。好比，OnInit 接口的钩子方法叫作 ngOnInit， Angular 在建立组件后马上调用它，：

export class PeekABoo implements OnInit {
  constructor(private logger: LoggerService) { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { this.logIt(`OnInit`); }

  logIt(msg: string) {
    this.logger.log(`#${nextId++} ${msg}`);
  }
}
复制代码

生命周期的顺序：

这里咱们重点学习 ngOnInit() 和 ngAfterViewInit()这两个方法。

首先新建 home 组件，其 html 内容为：

<h2>这里一个home组件---DOM操做演示</h2>

<div id="box">
  这是一个div标签
</div>
<br>
<div id="box2" *ngIf="flag" >
  这是第二个div标签
</div>
复制代码

home.component.ts 文件内容为：

export class HomeComponent implements OnInit {

  flag = true;
  constructor() { }

  /*生命周期函数*/
  ngOnInit(): void {
    /*//组件和指令初始化完成，并非真正的dom加载完成*/
    let oBox = document.getElementById('box');
    console.log(oBox.innerHTML);
    oBox.style.color = 'red';

    // 此处获取不到dom节点，因此最好不要在ngOnInit方法中获取dom节点
    /*let oBox2: any = document.getElementById('box2');
    console.log(oBox2.innerHTML);
    oBox2.style.color = 'blue';*/
  }

  // 视图加载完成后触发的方法，dom加载完成
  // tslint:disable-next-line: use-lifecycle-interface
  ngAfterViewInit(): void {
    let oBox2 = document.getElementById('box2');
    console.log(oBox2.innerHTML);
    oBox2.style.color = 'blue';
  }

}
复制代码

经过操做 dom 节点来区分 ngOnInit 和 ngAfterViewInit 方法，前者用来初始化指令/组件，后者是当 Angular 初始化完组件视图及其子视图以后调用。因此后者才知道 box2 是否渲染完毕，而后才能获取到该 dom 节点并加以修改。

页面运行效果以下：

父子组件之间通讯传值

新建四个组件：news,home,header,footer。其中 home 和 header 是父子组件关系,news 和 footer 是父子组件关系。

父组件经过@Input给子组件传值

一、home.component.html 用来传递变量和方法，也能够将 home 组件中全部信息传递过去。

<app-header [msg]="msg" [title]="title" [run]="run" [home]="this"></app-header>

<br>

<hr>

<br>

<h2>我是home组件</h2>
复制代码

二、home.component.ts

export class HomeComponent implements OnInit {

  msg: any = '我是home组件的msg';
  title: any = 'home组件的title';

  constructor() { }

  ngOnInit(): void {
  }

  run() {
    return '执行home组件的run方法';
  }

}
复制代码

三、header.component.html

<h2>我是header组件</h2>

<br>

<p>{{title}}-----{{msg}}</p>


<br>

<button (click)="getParentWay()">执行home组件的方法</button>
复制代码

四、header.component.ts，子组件中须要引入 Input，用来接收父组件传过来的数据。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  @Input() msg: any;

  @Input() title: any;

  @Input() run: any;
  /*//获取home组件全部内容*/
  @Input() home: any;

  constructor() { }

  ngOnInit(): void {
  }

  getParentWay() {
    // alert(this.run());
    alert(this.home.run());
  }

}
复制代码

五、网页运行效果以下：

六、小结

父组件给子组件传值，即子组件获取父组件的属性和方法，大体分为如下几步：

父组件页面嵌套子组件页面，将属性和方法存放在子组件声明中；
子组件引入 Input 模块；
子组件经过@Input 获取子组件声明中存放的属性和方法；

子组件经过ViewChild给父组件传值

一、news.component.html，

<app-footer #footerComponent></app-footer>

<br>
<hr>
<br>

<h2>我是news组件</h2>

<button (click)="getChildData()">获取子组件的数据</button>
<br>
<br>
<br>
<button (click)="getChildWay()">执行子组件的方法</button>
复制代码

二、news.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {

  @ViewChild('footerComponent') footer;

  constructor() {
  }

  ngOnInit(): void {
  }

  getChildData() {
    alert(this.footer.msg);
  }

  getChildWay() {
    this.footer.run();
  }

}
复制代码

三、footer.component.html

<h2>我是footer组件</h2>
复制代码

四、footer.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  msg: any = '我是footer组件的msg';

  constructor() {
  }

  ngOnInit(): void {
  }

  run() {
    alert('执行footer组件的run方法');
  }

}
复制代码

五、网页运行效果以下：

六、小结

子组件给父组件传值，即父组件主动获取子组件的属性和方法，大体分为如下几步：

父组件页面嵌套子组件页面，子组件声明时须要定义一个名称来代指子组件；
父组件引入 ViewChild 模块；
父组件经过@ViewChild 获取子组件的所有内容；

子组件经过Output给父组件传值

一、news.component.html，

<app-footer (outter)="run($event)"></app-footer>

<br>
<hr>
<br>

<h2>我是news组件</h2>
复制代码

二、news.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
  }

  run(e) {
    console.log(e);
    alert('我是news组件的方法');
  }

}
复制代码

三、footer.component.html

<h2>我是footer组件</h2>

<br>

<button (click)="sendMsg()">子组件广播事务</button>
复制代码

四、footer.component.ts

import {Component, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  @Output() private outter = new EventEmitter();

  constructor() {
  }

  ngOnInit(): void {
  }

  sendMsg() {
    this.outter.emit('我是footer组件的数据');
  }
}
复制代码

五、网页运行效果以下：

六、小结

子组件给父组件传值，即父组件接收子组件的属性，大体分为如下几步：

子组件引入 Output、EventEmitter 模块；
子组件将要传输的数据封装在 outter 中；
父组件页面嵌套子组件页面，子组件声明时须要将 outter 指向父组件中的某个方法，注意接收数据；

父子组件相互通讯

子组件 sizer.component.ts:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sizer',
  templateUrl: './sizer.component.html',
  styleUrls: ['./sizer.component.css']
})
export class SizerComponent implements OnInit {

  @Input() size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  constructor() { }

  ngOnInit(): void {
  }

  inc() {
    this.resize(+1);
  }

  dec() {
    this.resize(-1);
  }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}
复制代码

sizer.component.html:

<h2>子组件</h2>
<div>
  <button (click)="dec()" title="smaller">-</button>&nbsp;&nbsp;
  <button (click)="inc()" title="bigger">+</button>
  <br>
  <br>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
复制代码

size 的初始值来自属性绑定的输入值。单击按钮可在最小值/最大值范围内增大或减少 size，而后带上调整后的大小发出 sizeChange 事件。

Home2Component.fontSize 首先传递给 SizerComponent， $event 变量包含了 SizerComponent.sizeChange 事件的荷载。当用户点击按钮时，Angular 将 $event 赋值给 Home2Component.fontSizePx。父组件 home2.component.html：

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

<h2>父组件</h2>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
复制代码

Home2Component.fontSizePx 创建初始 SizerComponent.size 值。 home2.component.ts:

fontSizePx = 16;
复制代码

页面测试：

上述父子组件之间通讯的关键在于：

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
复制代码

此处还能够经过双向绑定来实现，双向绑定语法其实是属性绑定和事件绑定的语法糖，因此还能够改成：

<app-sizer [(size)]="fontSizePx"></app-sizer>
复制代码

Home2Component.fontSize 被双向绑定到 SizerComponent

Rxjs异步数据流编程

介绍

RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据
流的编程。简单来讲，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流
的形式，而后用强大丰富的操做符对流进行处理，使你能以同步编程的方式处理异步数据，
并组合不一样的操做符来轻松优雅的实现你所须要的功能。

RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可无论如何解释 RxJS 其目
标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。

RxJS 里面提供了不少模块。这里咱们主要给你们讲 RxJS 里面最经常使用的 Observable 和
fromEvent。

参考手册：https://www.npmjs.com/package/rxjs
中文手册：https://cn.rx.js.org/

关于异步编程方法的讲解，能够参考 Javascript异步编程的4种方法。

目前常见的异步编程的几种方法：

回调函数
事件监听/发布订阅
Promise
Rxjs

本次测试须要新建一个 home2 组件，和 storage 服务，异步编程方法封装在 storage 服务中，供组件调用。

首先咱们定义一个同步方法，来测试其效果。

一、storage.service.ts

  getData() {
    // console.log('this is service data');
    return 'this is service data';
  }
复制代码

二、home2.component.ts

import {StorageService} from '../../services/storage.service';

  constructor(public storage: StorageService) {
  }

  /*//一、同步方法*/
  getData() {
    console.log(this.storage.getData());
  }
复制代码

三、页面测试

从结果能够看出，每点击一下按钮，同步方法就会马上获取到数据。可是在实际生产中，同步操做容易形成堵塞问题，异步操做的出现很好的解决该问题。

回调函数

这是异步编程最基本的方法。

一、storage.service.ts

  // 一秒后获取数据
  getCallbackData(cb) {
    setTimeout(() => {
      // tslint:disable-next-line:prefer-const
      let username = 'hresh';
      cb(username);
    }, 1000);
  }
复制代码

二、home2.component.ts

import {StorageService} from '../../services/storage.service';

  constructor(public storage: StorageService) {
  }

  getCallbackData() {
    /*二、经过Callback获取异步数据*/
    this.storage.getCallbackData((data) => {
      console.log(data);
    });//a操做
    console.log('延时获取数据');//b操做
  }
复制代码

三、页面测试

从页面结果来看，a操做不会阻塞程序运行，会被推迟执行，不会影响b操做的执行。

回调函数的优势是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，并且每一个任务只能指定一个回调函数。

事件监听

另外一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

演示代码以下：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-home2',
  templateUrl: '
      <h2>事件监听</h2>
      <input type="button" value="点击" id="btn">
      <input type="button" value="移除" id="del">
    '
})
export class Home2Component implements OnInit {

  fn1() {
    alert('first');
  }

  fn1() {
    alert('first');
  }

  fn2() {
    alert('second');
  }

  ngOnInit(): void {
    $('h2').css('color', 'blue');

    let $body = $('body');

    $body.delegate('#btn', 'click', this.fn1);
    $body.delegate('#btn', 'click', this.fn2);

    $('#del').on('done', () => alert('解除事件绑定'));

    setTimeout(() => {
      $('#del').trigger('done');
    }, 2000);
  }

}
复制代码

页面测试效果：

#btn 标签能够绑定多个事件，$('#del').trigger('done')表示页面初始化后，2s 以后会触发 done 事件，从而执行 alert 事件。

这种方法的优势是比较容易理解，能够绑定多个事件，每一个事件能够指定多个回调函数，并且能够"去耦合"（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。

Promise

Promise 本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果。何时会用到过一段时间？答案是异步操做，异步是指可能比较长时间才有结果的才作，例如网络请求、读取本地文件等。

它的思想是，每个异步任务返回一个 Promise 对象，该对象有一个 then 方法，容许指定回调函数。好比，f1的回调函数f2,能够写成：

f1().then(f2);
复制代码

在 Angular 项目中可使用以下测试案例：

一、storage.service.ts

getPromiseData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // tslint:disable-next-line:prefer-const
      let username = 'hresh----Promise';
      resolve(username);
    }, 2000);
  });
}
复制代码

二、home2.component.ts

import {StorageService} from '../../services/storage.service';

  constructor(public storage: StorageService) {
  }

  getPromiseData(){
    /*三、经过Promise获取异步数据*/
    let promiseObj = this.storage.getPromiseData();
    promiseObj.then((data) => {
      console.log(data);
    });
  }
复制代码

三、页面测试

另外 Promise 的 then 方法返回的是一个新的 Promise 实例，所以 then 可用链式调用。好比，指定多个回调函数：

f1().then(f2).then(f3);
复制代码

再好比，指定发生错误时的回调函数：

f1().then(f2).fail(f3);
复制代码

并且，它还有一个前面三种方法都没有的好处：若是一个任务已经完成，再添加回调函数，该回调函数会当即执行。因此，你不用担忧是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

Rxjs

Rxjs 处理异步：

一、storage.service.ts

import { Observable } from 'rxjs';
getRxjsData() {
  return new Observable((observer) => {
    setTimeout(() => {
      let uname = 'hresh----Rxjs';
      observer.next(uname);
    }, 3000);
  });
}
复制代码

二、home2.component.ts

import {StorageService} from '../../services/storage.service';

  constructor(public storage: StorageService) {
  }

  getRxjsData(){
    /*四、经过Rxjs获取异步数据*/
    let observer = this.storage.getRxjsData();
    let oData = observer.subscribe((data) => {
      console.log(data);
    });
  }
复制代码

页面测试效果同 Promise 同样。从上面列子能够看到 RxJS 和 Promise 的基本用法很是相似，除了一些关键词不一样。 Promise 里面用的是 then() 和 resolve()，而 RxJS 里面用的是 next() 和 subscribe()。

其实Rxjs相比Promise 要强大不少。好比 Rxjs 中能够中途撤回、Rxjs 能够发射多个值、Rxjs 提供了多种工具函数等等。

Rxjs 能够经过 unsubscribe() 能够撤回 subscribe 的动做。

咱们修改 home2.component.ts 文件内容以下：

import {StorageService} from '../../services/storage.service';

  constructor(public storage: StorageService) {
  }

  getRxjsData(){
    /*四、经过Rxjs获取异步数据*/
    let observer = this.storage.getRxjsData();
    let oData = observer.subscribe((data) => {
      console.log(data);
    });

      /*五、Rxjs容许取消订阅操做*/
    setTimeout(() => {
      oData.unsubscribe();
    }, 2000);
  }
复制代码

数据交互（Get,Post,jsonp）

Angular5.x 之后 Get、Post 和 jsonp 经过 HttpClientModule 模块来和服务器进行数据交互。

Get获取数据

一、在 app.module.ts 中引入 HttpClientModule

import {HttpClientModule} from '@angular/common/http';

imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
]
复制代码

二、html 文件内容：

<p>new3 works!</p>

<br>
<hr>
<br>

<button (click)="getData()">get请求数据</button>

<br>
<hr>
<br>

<ul>
  <li *ngFor="let item of dataList">{{item.name}} --- {{item.age}}</li>
</ul>

<br>
复制代码

三、new3.component.ts 文件

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';

@Component({
  selector: 'app-new3',
  templateUrl: './new3.component.html',
  styleUrls: ['./new3.component.css']
})
export class New3Component implements OnInit {

  dataList: any[] = [];

  constructor(public client: HttpClient) {
  }

  ngOnInit(): void {
  }

  getData() {
    // var api = 'http://a.itying.com/api/productlist';
    var api = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    this.client.get(api).subscribe((data: any) => {
      console.log(data);
      this.dataList = data.members;
    });
  }
}
复制代码

四、网页运行效果以下：

Post获取数据

在 SpringMVC 项目构建后台服务方法，一个是用 RequestBody 接受参数，另外一个是用 RequestParam 接受参数。

@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class EncodingController {

    @RequestMapping(value = "/testPostPara2")
    public Map testPostPara2(@RequestParam String uname,@RequestParam int age){
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("name",uname);
        map.put("age",age);
        return map;
    }

    @RequestMapping("/testPostBody")
    public Map testPostBody(@RequestBody Map<String,Object> objectMap){
        System.out.println(objectMap.toString());
        return objectMap;
    }
}
复制代码

出于安全缘由，浏览器禁止 Ajax 调用驻留在当前原点以外的资源。例如，当你在一个标签中检查你的银行帐户时，你能够在另外一个选项卡上拥有 EVILL 网站。来自 EVILL 的脚本不可以对你的银行 API 作出 Ajax 请求（从你的账户中取出钱！）使用您的凭据。跨源资源共享（CORS）是由大多数浏览器实现的W3C规范，容许您灵活地指定什么样的跨域请求被受权，而不是使用一些不太安全和不太强大的策略，如IFRAME或JSONP。关于跨域的更多内容能够参考注解@CrossOrigin解决跨域问题

注意上述方法都返回的是 Map 类型，不须要转换为 String 类型返回。可是若是直接访问 http://localhost:8080/testPostPara2?uname=hresh22&age=24 是会报错的，必须转换为 String 类型。

一、一样须要在 ap.module.ts 中引入 HttpClientModule 模块并注入。

二、html

<br>

<button (click)="doPost2()">post提交数据:body中传参</button>

<br>
<hr>
<br>
<button (click)="doPost()">post提交数据:url后携带参数</button>
复制代码

三、new3.component.ts 文件

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';

@Component({
  selector: 'app-new3',
  templateUrl: './new3.component.html',
  styleUrls: ['./new3.component.css']
})
export class New3Component implements OnInit {

  dataList: any[] = [];

  constructor(public client: HttpClient) {
  }

  ngOnInit(): void {
  }

  doPost() {
    const header = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    let url = 'http://localhost:8080/testPostPara2?uname=hresh22&age=24';
    this.client.post(url, {}, header).subscribe((response: any) => {
      console.log(response);
    });
  }
  doPost2() {
    const header = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    let url = 'http://localhost:8080/testPostBody';
    this.client.post(url, { 'uname': 'hresh', 'age': 24 }, header).subscribe((response: any) => {
      console.log(response);
    });
  }
}
复制代码

四、页面测试

须要先启动 web 项目，而后再启动 Angular 项目，点击页面上的按钮，查看效果。

jsonp获取数据

同 Get 请求获取数据同样，而后主要是添加 html 文件和 ts 中的方法。

一、在 app.module.ts 中引入 HttpClientJsonpModule

import {HttpClientJsonpModule} from '@angular/common/http';

imports: [
    BrowserModule,
    HttpClientJsonpModule
]
复制代码

二、html

<button (click)="getJsonpData()">Jsonp获取数据</button>
复制代码

三、new3.component.ts 文件

  getJsonpData() {
    var api = 'http://a.itying.com/api/productlist';
    this.client.jsonp(api, 'callback').subscribe((data) => {
      console.log(data);
    })
  }
复制代码

四、页面测试

第三方模块axios获取数据

一、安装 axios

npm install axios 
复制代码

二、配置服务文件 httpservice.service.ts

import {Injectable} from '@angular/core';
import axios from 'axios';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpserviceService {

  constructor() {
  }

  //能够返回Promise对象，也可使用Rxjs，根据我的习惯
  axiosGet(api) {
    return new Promise((resolve, reject) => {
      axios.get(api).then(function(res) {
        resolve(res);
      });
    });
  }

  axiosRxjs(api) {
    return new Observable(function(observer) {
      axios.get(api).then(function(res) {
        observer.next(res);
      });
    });
  }
}
复制代码

三、html 文件

<button (click)="getAxiosData()">Axios获取数据方式一</button>
<hr>
<br>
<button (click)="getAxiosData2()">Axios获取数据方式二</button>
复制代码

四、在用到的地方引入 httpservice 并在构造函数声明

import { HttpserviceService } from '../../services/httpservice.service';

  constructor(public client: HttpClient, public httpservice: HttpserviceService) {
  }

  //经过第三方模块获取服务器数据
  getAxiosData() {
    var api = 'http://a.itying.com/api/productlist';
    let axiosObj = this.httpservice.axiosGet(api);
    axiosObj.then((data) => {
      console.log(data);
    })
  }

  //经过Rxjs获取
  getAxiosData2() {
    var api = 'http://a.itying.com/api/productlist';
    let axiosObj = this.httpservice.axiosRxjs(api);
    axiosObj.subscribe(function (data) {
      console.log(data);
    })
  }
复制代码

五、页面测试