Angular基础知识学习（二）

hresh 508 0

Angular基础知识学习（二）

服务

创建服务之后，我们在 StorageService.service.ts 中定义一个测试方法：

export class StorageService {

  constructor() {

  }

  test() {
    alert('调用服务方法');
  }
}

我们重新建立一个 home 组件，来测试服务调用。

<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();
  }

}

测试：

Angular基础知识学习（二）

数据持久化到localStroage

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

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

  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);
  }

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

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 文件基本不变，测试效果：

Angular基础知识学习（二）

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

生命周期

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

每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 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}`);
  }
}

生命周期的顺序：

Angular基础知识学习（二）

这里我们重点学习 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 节点并加以修改。

页面运行效果如下：

Angular基础知识学习（二）

父子组件之间通信传值

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

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

1、home.component.html 用来传递变量和方法，也可以将 home 组件中所有信息传递过去。

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

<br>

<hr>

<br>

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

2、home.component.ts

export class HomeComponent implements OnInit {

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

  constructor() { }

  ngOnInit(): void {
  }

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

}

3、header.component.html

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

<br>

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


<br>

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

4、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());
  }

}

5、网页运行效果如下：

Angular基础知识学习（二）

6、小结

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

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

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

1、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>

2、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();
  }

}

3、footer.component.html

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

4、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方法');
  }

}

5、网页运行效果如下：

Angular基础知识学习（二）

6、小结

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

  1. 父组件页面嵌套子组件页面，子组件声明时需要定义一个名称来代指子组件；
  2. 父组件引入 ViewChild 模块；
  3. 父组件通过@ViewChild 获取子组件的全部内容；

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

1、news.component.html，

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

<br>
<hr>
<br>

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

2、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组件的方法');
  }

}

3、footer.component.html

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

<br>

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

4、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组件的数据');
  }
}

5、网页运行效果如下：

Angular基础知识学习（二）

6、小结

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

  1. 子组件引入 Output、EventEmitter 模块；
  2. 子组件将要传输的数据封装在 outter 中；
  3. 父组件页面嵌套子组件页面，子组件声明时需要将 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;

页面测试：

Angular基础知识学习（二）

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

<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种方法。

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

  1. 回调函数
  2. 事件监听/发布订阅
  3. Promise
  4. Rxjs

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

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

1、storage.service.ts

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

2、home2.component.ts

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

  constructor(public storage: StorageService) {
  }

  /*//1、同步方法*/
  getData() {
    console.log(this.storage.getData());
  }

3、页面测试

Angular基础知识学习（二）

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

回调函数

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

1、storage.service.ts

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

2、home2.component.ts

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

  constructor(public storage: StorageService) {
  }

  getCallbackData() {
    /*2、通过Callback获取异步数据*/
    this.storage.getCallbackData((data) => {
      console.log(data);
    });//a操作
    console.log('延时获取数据');//b操作
  }

3、页面测试

Angular基础知识学习（二）

从页面结果来看，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);
  }

}

页面测试效果：

Angular基础知识学习（二）

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

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

Promise

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

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

f1().then(f2);

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

1、storage.service.ts

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

2、home2.component.ts

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

  constructor(public storage: StorageService) {
  }

  getPromiseData(){
    /*3、通过Promise获取异步数据*/
    let promiseObj = this.storage.getPromiseData();
    promiseObj.then((data) => {
      console.log(data);
    });
  }

3、页面测试

Angular基础知识学习（二）

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

f1().then(f2).then(f3);

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

f1().then(f2).fail(f3);

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

Rxjs

Rxjs 处理异步：

1、storage.service.ts

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

2、home2.component.ts

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

  constructor(public storage: StorageService) {
  }

  getRxjsData(){
    /*4、通过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(){
    /*4、通过Rxjs获取异步数据*/
    let observer = this.storage.getRxjsData();
    let oData = observer.subscribe((data) => {
      console.log(data);
    });

      /*5、Rxjs允许取消订阅操作*/
    setTimeout(() => {
      oData.unsubscribe();
    }, 2000);
  }

数据交互（Get,Post,jsonp）

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

Get获取数据

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

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

imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
]

2、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>

3、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;
    });
  }
}

4、网页运行效果如下：

Angular基础知识学习（二）

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 类型。

1、同样需要在 ap.module.ts 中引入 HttpClientModule 模块并注入。

2、html

<br>

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

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

3、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);
    });
  }
}

4、页面测试

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

Angular基础知识学习（二）

jsonp获取数据

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

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

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

imports: [
    BrowserModule,
    HttpClientJsonpModule
]

2、html

<button (click)="getJsonpData()">Jsonp获取数据</button>

3、new3.component.ts 文件

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

4、页面测试

Angular基础知识学习（二）

第三方模块axios获取数据

1、安装 axios

npm install axios

2、配置服务文件 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);
      });
    });
  }
}

3、html 文件

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

4、在用到的地方引入 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);
    })
  }

5、页面测试

Angular基础知识学习（二）

本文作者为hresh，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

分享