自定义管道
运行ng generate pipe pipes/cny-currency
因为自定义管道使用的比较少,所以我们把管道都新建到pipes文件目录下。
打开\src\app\pipes\cny-currency.pipe.ts
这里我们编写了一个简单的管道,在输入的前面加上人民币符号,输出。
这里应该都很好理解,name是我们在html中使用的名字。
transform是管道的关键方法。
value是输入的值。可以指定类型。
args是可选参数,在使用的时候,就是名字后面加冒号的那些属性。
我们在\src\app\site-status\site-status.component.html中测试一下。
<li>在线访客:{{siteStatus.onlineNum|cnyCurrency}}</li>
链式管道
我们可以把管道链在一起,组合起来一起使用。
比如我们像让金额保留两位小数,并且加上人民币符号。
我们可以如下修改
<li>在线访客:{{siteStatus.onlineNum|number:'1.2-2'|cnyCurrency}}</li>
纯(pure)管道与非纯(impure)管道
默认的管道都是纯管道,我建议不要使用非纯管道。
纯管道和非纯管道的区别就是是否实时的检测数据是否发生变化。
如我们在使用纯管道的时候,简单的修改被绑定的数组,是不会刷新界面的。
所以我的建议是记下在修改数据的时候,直接更换整个数据,
而不是使用类似push这样的方法,修改数据内部。
因为这样的修改,不会触发Angular的纯管道调动。
没有过滤和排序
在AngularJS1.x中的filter和orderBy过滤器,在Angular中它们没有等价物。
如果需要使用这样的方法,可以通过编写一个服务,然后注入到函数中。
在绑定到页面之前对数据进行操作。
如果这的要在管道中使用过滤,也可以是用以下方法实现。
dataArrs.filter(item=>item.showType)
这节课的内容就到这里完成了。
感谢您的阅读。
我是莽夫,希望你开心。