• angular6之pipe管道


    作为前端开发人员,我们在网站开发时,需要读取后端的接口进行视图层的数据展示。我们经常会遇到接口给予我们的值不是最终展现的数据,例如:后端返回的金额是number类型额数据,我们需要遇到千分位用逗号隔开(10000 -> 10,000),重量10000g转成10kg等,这些需要前端把数据进行简单的转换成对用户友好的格式。在angular6中pipe便发挥这样的作用,熟悉vue的同学会感觉非常类似vue中的computed计算属性。

    下面介绍angular6中pipe的具体用法

    1、ng g pipe <pipe名称>

    pipe名称可以带有路径,如pipes/pipename 这样就会在src/app目录生成pipes目录,并在齐目录下生成文件pipename.pipe.ts

    2、pipe文件中的代码

    (1)、引入相应模块

    import { Pipe, PipeTransform } from '@angular/core';
    (2)、声明pipe
    @Pipe({
      name: 'weightChange'
    })
    name值为代码中需要用到的对应管道的名称
    声明pipe时还有另外一个属性pure,接受bool值,用来声明是不是纯管道,默认情况下是纯管道,那么纯管道和非纯管道有什么区别呢?
    管道中纯管道和非纯管道之间的区别关键在于:
    如果是纯管道,他检测的深读很低,比如检测一个对象数组,对象数组中的对象的某个属性发生变化的时候,纯管道是检测不到的,这时候就需要用到非纯管道。
    但是要注意非纯管道对性能影响较大。具体可以参考https://angular.cn/guide/pipes 官方解释。
    (3)、pipe类
    export class weightChangePipe implements PipeTransform {
      transform(value: any, args?: any): any {
        return value&&value>1000?value/1000+'kg':value+'g';
      }
    }
    transform方法将原始数据作为参数,方法中的具体代码是将原始值转化成最终值,以上代码是将大于1000g的值转成kg单位的例子
    (4)、将改管道在angular的模块中进行声明
    @NgModule({
      declarations: [
        ........
        TimechangePipe,
        ......
      ]
    })
    这样就可以在具体的代码中直接使用了
    例如在代码中:
    <span>{{ riceWeight | weightChange }}<span>
     
    angular中引入了概念比如service, directive,pipe等将一些公共的代码从业务代码中抽离,其最终目的就是解耦,降低代码的耦合度。通过他的框架可以更好的管理应用程序。
     
     
  • 相关阅读:
    鸟哥的Linux私房菜学习笔记(1)
    Linux下搭建Oracle11g RAC(4)----配置oracle,grid用户SSH对等性
    解决升级windows8.1 Oracle服务被刷新
    Linux下搭建Oracle11g RAC(3)----创建用户及配置相关文件
    Linux下搭建Oracle11g RAC(2)----配置DNS服务器,确认SCAN IP可以被解析
    Linux下搭建Oracle11g RAC(1)----IP分配与配置IP
    Oracle11g新特性导致空表不能导出问题
    svn is already locked 最终解决方案
    .cur 图片加载提示 You may need an appropriate loader to handle this file type
    Request header field userRole is not allowed by Access-Control-Allow-Headers in preflight response.
  • 原文地址:https://www.cnblogs.com/leejay6567/p/10017802.html
Copyright © 2020-2023  润新知