Angular--响应式编程

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Luojun13Class/article/details/82179378

前言

Angular学习非常的有趣，而且要学的内容非常多，这次给大家介绍一下如何响应式编程。

内容

提到响应式编程，不得不说一下观察者模式，观察者模式就是用到了响应式编程，如下图：

这个图中介绍了观察者（Observer）和被观察者（Observable）两方面的交互，看完这个图你是否对于观察者模式有一定的了解了，那么接下来就直接简单粗暴的上代码：

HTML：

<p>
    bindworks!
</p>

<input #myField (keyup)="onKey(myField.value)">

—————————-华——丽——-的——–分——-割———线————————–

TypeScript：

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

@Component({
    selector:'app-bind',
    templateUrl:'./bind.component.html',
    styleUrls:['./bind.component.css']
})
exportclass BindComponent implements OnInit{
    constructor(){
        Observable.from([1,2,3,4,6,8,10])
            .filter(e=>e%2===0)
            .map(e=>e*e)
            .subscribe(
                e=>console.log(e),
                err=>console.error(err),
                ()=>console.log('结束啦！')
            );
    }

    ngOnInit(){

    }
}

HTML代码是介绍如何在界面中显现出来，核心代码是在TypeScript中，即下面这段代码，现在我们来好好分析下面这段代码：
Observable对象的From方法从一个数组中创建了一个可监听的流（也就是被观察者Observable）。
针对这些流我们可以进行操作如：.filter、.map等很多，
.subscribe接收并处理对订阅中的流中的元素的对象，里面的元素称为观察者，如：

e=>console.log(e),
err=>console.error(err),
()=>console.log('结束啦！')

所有的这一切组合起来就是一个观察者模式，响应式编程就是观察者模式的一个实现。
在响应式编程里面：
被观察者（流）可以做三件事：

1. 发射下一个元素，这个元素可以是任何东西，它的类型取决于流的源头，如：在此项目中是一个数字类型的数组。。
2. 流可以抛出一个异常，处理的时候抛异常。
3. 发射一个信号，告诉观察者流已经结束。

观察者可以做三件事：

1. 接收被观察者发射出的元素。
2. 处理被观察者抛出的异常。
3. 接收被观察者已经结束的信息，并且被调用。
   
   1. 2和3项可有也可无，没有也能照样能进行。

总结

简单的介绍了一下响应式编程，这方面的内容还有很多，需要我们好好去学习，所以，少年，加油吧！

end

谢谢您的阅读！