angular4之管道

     1.   什么是管道？

      日常生活中，管道就是进行疏通，过滤，连接各个渠道的工具。

      2.  angular的管道是什么?

      所有的编程灵感都源于对生活便利。angular的管道主要作用是用于过滤和连接数据。

    步入正题：

     angular4为我们内置了多种管道。

       

    

       具体用法:

       

       用在所需过滤的数据后面以 |  隔开，以：后面作为参数传递，如需多个参数，可以多个冒号隔开。例如 2222  | number：'1':'2'  ，   这里只是打个比喻。这里补充点，对于number的参数解释： 如 1.1-2 意思是 以小数点前至少保留1位数，小数点后至少保留1位，最多保留两位，且还会对其进行四舍五入。

       链式操作

         类似于Jquery，管道也可以进行链式过滤，例如   2222 |   currency: '$'  | number：'1':'2' ， 先用currency过滤后，在执行number的过滤。

           

       自定义管道

           管道也可进行自定义，依照angular4的版本，国际惯例，上图。

           

           angular4以上版本创建管道实现PipeTransform接口 ，重写transform方法,transform有两个参数，分别为过滤的值和传入管道的参数。

           使用方法:

           

          

         非纯管道

            什么是非纯管道？

            以上咱们所写的都是纯管道，在没有特殊指明的管道都为纯管道（也就是说默认的都是纯管道）。

            关于管道变更，运用官网的一句话。

            Angular 只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改， 或者对对象引用(Date、Array、Function、Object)的更改。

            这就产生一个问题，假如我们有个数组，每次点击往数组增加一个数据，对于纯管道来说，数组本身引用不便，就不会触发管道。你可以选择每次都创建一个新的数组，从而让纯管道触发变更。后者，你可以用我们要讲的非纯管道。

           非纯管道，只要管道应用所在的数据的值发生变化，意思就是和上一次的数值不同，就会触发变更。

           非纯管道的写法：

            

            其用法和纯管道相同。

            

         非纯 AsyncPipe

             对于第一次看asyncPipe，我也是一头雾水。但使用之后，发生真的好方便。

             asyncPipe是一个内置管道，接受一个 Promise 或 Observable 作为输入，并且自动订阅这个输入，最终返回它们给出的值。

             什么是promise？可以百度看看阮一峰大神的es6。

             什么是Observable ?其涉及到一个模式，观察者模式，有兴趣的同学可以百度看看其原理。

             观察者模式，来源于生活。例如，我们需要看一个节目，首先，我们需要订阅节目，才可以知道什么时候可以看节目。其次，做节目的人，发送通知，通知我们可以看节目了，我们才可以真正的看节目。拿http来说，Observable 是一个观察者对象，首先，我们需要订阅，告诉http我们订阅了，啥时候给我们数据，http请求完，然后发送通知，通知我们数据到手，赶紧拿去，这时候，我们就可以进行操作。而AsyncPipe就是让我们免去了订阅这个步骤，它会自动帮我们订阅，直接帮我们拿到了数据。写法截至官网：

以上只是对官网，进行详细的说明，有兴趣的朋友可以看看官网的教程:https://angular.cn/guide/pipes#appendix-no-emfilterpipeem-or-emorderbypipeem.