今天完成的事

生命周期函数

生命周期函数通俗的讲就是组件创建，组件更新，组件销毁的时候会触发的一系列方法，当angular使用构造函数新建一个组件或者指令后，就会按照下面的顺序在特定的时刻调用这些生命周期方法，也叫钩子函数。

constructor 构造函数中除了使用简单的值对局部变量进行初始化

之外，什么都不应该做。 （非生命周期函数）

ngOnChanges() 当 Angular（重新）设置数据绑定输入属性时响应。 该

方法接受当前和上一属性值的 SimpleChanges 对象

当被绑定的输入属性的值发生变化时调用，首次调用一

定会发生在 ngOnInit() 之前。主要用在父子组件传值中，父组件给子组件传值的时候以及父组件改变传值的数据的时候会触发

ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输

入属性之后，初始化指令/组件，主要用来请求数据的。

在第一轮 ngOnChanges() 完成之后调用，只调用一次。

用 使用 ngOnInit() 有两个原因：

1、在构造函数之后马上执行复杂的初始化逻辑

2、在 Angular 设置完输入属性之后，对该组件进行准

备。

有经验的开发者会认同组件的构建应该很便宜和安全。

ngDoCheck() 检测，并在发生 Angular 无法或不愿意自己检测的变

化时作出反应。在每个 Angular 变更检测周期中调用，可以做一些我们自定义的操作，比如说我们看一下数据有没有改变。ngOnChanges() 和 ngOnInit() 之后。

ngAfterContentInit() 当把内容投影进组件之后调用。组件渲染完成之后触发的生命周期函数，第一次 ngDoCheck() 之后调用，只调用一次。

ngAfterContentChecked() 每次完成被投影组件内容的变更检测之后调用，组件初始化之后做的一些自定义操作

ngAfterContentInit() 和每次 ngDoCheck() 之后调用。

ngAfterViewInit() 初始化完组件视图及其子视图之后调用。第一

次 ngAfterContentChecked() 之后调用，只调用一次。非常重要在此处进行dom操作。

ngAfterViewChecked() 每次做完组件视图和子视图的变更检测之后调用。可以做一些自定义的操作ngAfterViewInit()和每次 ngAfterContentChecked() 之后调用。

ngOnDestroy() 当 Angular 每次销毁指令/组件之前调用并清扫。在这

儿反订阅可观察对象和分离事件处理器，以防内存泄

漏。

在 Angular 销毁指令/组件之前调用。

标红的是必须掌握的，只要带check表示里面可以写我们自定义的方法，对数据进行一些响应，比如数据改变了需要做一些处理，数据没改变需要做一些什么处理。

点击取消组件

生命周期函数触发的顺序

页面刷新触发的函数顺序

constructor

ngOnInit

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

视图渲染完成以后或者数据改变后触发的周期函数

ngDoCheck

ngAfterContentChecked

ngAfterViewChecked

父子组件传值时触发的周期函数

NgOnChages

销毁组件时触发的生命函数

ngOnDestroy

Promise.prototype.then()方法

Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

回调函数解决异步的方法

Rxjx

RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软， 它是一种针对异步数据

流的编程。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流

的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，

并组合不同的操作符来轻松优雅的实现你所需要的功能。

RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其目

标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。

Promise 和 和 RxJS 处理异步对比

Promise 处理异步:

let promise = new Promise(resolve => {

setTimeout(() => {

resolve('---promise timeout---');

}, 2000);

});

promise.then(value => console.log(value));

RxJS 处理异步：

import {Observable} from 'rxjs';

let stream = new Observable(observer => {

setTimeout(() => {

observer.next('observable timeout');

}, 2000);

});

stream.subscribe(value => console.log(value));

首先需要引入Rxjx，在服务里引入Rxjx

Rxjs相比Promise 要强大很多。

比如 Rxjs 中可以中途撤回、Rxjs 可以发射多个值、Rxjs 提供了多种工具函数等等。

中途撤回

把结果定义一个变量，然后整一个定时器，最后用unsubscribe()方法

消失了

多次执行

如果我们想让异步里面的方法多次执行，这一点 Promise 是做不到的，对于 Promise 来说，最终结果要么 resole（兑现）、要么 reject

（拒绝），而且都只能触发一次。如果在同一个 Promise 对象上多次调用 resolve 方法，

则会抛异常。而 Observable 不一样，它可以不断地触发下一个值，就像 next() 这个方法的

名字所暗示的那样。

‍‍明天完成的事‍‍

继续学习angular

遇到的困难

虽然对angular了解了很多但是还是有很多不明白的地方

收获

又学会了好几个angular技能