Angular-管道

1、管道的作用

答：用于在模板表单式中对给定的数据进行转换和格式化，并输出处理后的数据，如：转换日期格式、货币格式、数字精度、过滤列表数据等

 

2、如何创建自定义管道

答：自定义管道实现了PipeTransform接口，并定义transform()方法，该方法接受给定的数据和转换参数，并返回转换后的结果

    a、使用@Pipe装饰器定义管道类，如：

        @Pipe({

            name: 'myCustomPipe'

        })

        export class MyCustomPipe implements PipeTransform {

            transform(value, transformParams) {

                return transformResult;

            }

        }

        注意：

            value：给定的需要转换的数据

            transformParams：转换数据用到的参数或者转换条件

    b、并添加进@NgModule装饰器元数据对象属性declarations中

    c、在html模板中使用管道，如：

        <div>{{data | myCustomPipe:params}}</div>

 

注意：在模板中使用“|”符号来使用管道，转换参数是以“:”符号接在管道名称之后，如果由多个参数，可以顺序添加。如果需要同时使用多个管道处理数据可以按照转换顺序用“|”符号在尾部继续添加，

    如：data | myCustomPipe: params | myCustomPipe: params | myCustomPipe

 

3、管道中的数据变更检测方式

答：管道会在每次dom事件之后（鼠标移动、计时器、服务器响应、按键）对绑定的需要转换的数据的变更进行检测，而且针对基础数据类型和应用类型的检测规则有所不同

    a、针对基础数据类型的检测：对String\Number\Boolean\null\undefined\Symbol的变更，也称之为纯变更，采用的是纯管道（给定输入会返回固定的输出），会直接重新执行管道并返回转换结果

    b、针对引用数据类型的检测：对Object\Function\Date\Array\Map\Set等的变更，也称之为非纯变更，采用的是非纯管道（即需要对数据进行深层次的检索来确定是否变更）

    注意：在使用纯管道来处理引用类型的数据时，可以采取返回一个全新的数据对象来激活纯管道的变更检测机制，而非只更改数据内部的给别属性或者添加内容

 

4、纯管道和非纯管道

答：

    a、纯管道：采用的是纯函数，返回一个没有副作用的结果，即发给定相同的输入，总是返回固定的值，创建管道默认是纯管道

    b、非纯管道：将@Pipe装饰器元数据对象中的pure属性设置为false即可。其他部分于纯管道一致

 

5、从可观察对象中解包数据

答：angular内置的有一个AsyncPipe，此管道接受一个可观察对象，并自动调用此可观察对象，并返回该观察对象给出的值，可以用于异步获取服务器返回的数据

注意：该管道是一个非纯管道，其特点是每个绑定的管道都有自己的管道实例，彼此之间互不影响

 

6、管道的优先级

答：管道的优先级会高于其他一些运算符，所以需要在使用前对数据进行判断时，要用()包裹起来

 

 

7、Angular内置的非纯管道

答：AsyncPipe\JosnPipe\KeyValuePipe\SlicePipe