专栏首页CRPER折腾记Angular 2 + 折腾记 :(5) 动手实现一个自定义管道

Angular 2 + 折腾记 :(5) 动手实现一个自定义管道

前言

管道这东西,可以让用户的体验变得好,也可以省去我们一些重复性的工作;
官方的内置管道就不解释了。。自行看文档吧复制代码

管道的常规使用

一般是用于Mustache语法的双向数据内,eg: {{item | json}}

上面的例子是用了内置的JsonPipe管道。。有人说管道带参数怎么搞?,eg :{{item |slice:0:4 }}

管道后面冒号跟随的就是参数, 也许还有人问如何多重管道调用? , eg :{{item | slice:0:4 | uppercase}}

这里看出来了么,这是使用了数据流的概念,用过linux管道的小伙伴一看就知道了。。item 的输入数据

slice处理后再丢给uppercase处理,最终返回的结果集就是切割后并且转为大写字符的数据


书写一个自定义管道

  • Demo写法
// 自定义管道必须依赖这两个
import { Pipe, PipeTransform } from '@angular/core';

// 管道装师符 , name就是管道名称
@Pipe({
  name: 'name'
})


export class PipeNamePipe implements PipeTransform {
  // value : 就是传入的值
  // ...args : 参数集合(用了...拓展符),会把数组内的值依次作为参数传入
  // ...args可以改成我们常规的写法(value:any,start:number,end:number)
  transform(value: any, ...args: any[]): any {

  }
}
  • 实现一个切割字符串然后拼接...的管道【用于渲染数据过长截取】
import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'SliceStr'
})
export class SliceStrPipe implements PipeTransform {
  /**
    * 截图字符串字符
    * option(start,end,[+str])
    */
  // start和end及extraStr后面都跟随了一个问好,代表这个为可选参数而不是必选的
  // 功能就是给出截图的启示,然后是否拼接你自定义的字符串(...)等
  transform(value: string, start?: number, end?: number, extraStr?: string): string {
    // console.log( value );
    if (value) {
      if (typeof (start) === 'number' && typeof (end) === 'number') {
        if (value.length > end && extraStr && typeof (extraStr) === 'string') {
          // console.log( start, end, extraStr );
          return value.slice(start, end) + extraStr.toString();
        } else {
          return value.slice(start, end);
        }

      } else {
        return value;
      }
    } else {
      return value;
    }

  }
}
  • 上面的效果图,结合[title]实现数据截取,悬浮看到完整的数据

局部代码的写法 --- 这是视图绑定的使用方法,那若是放在ts里面如何使用一个管道呢。。且看我道来

  <td [title]="item.SupplierName">{{item.SupplierName | SliceStr:0:13:'...' || '' }}</td>复制代码

局部代码的写法 --- ts内管道处理数据

// 引入日期转换管道
import { TransDatePipe } from '../../../../../widgets/mit-pipe/TransDate/trans-date.pipe';

// 使用自定义管道处理ts内的数据
const PublishDate: new TransDatePipe().transform(res.Data.PublishDate) || '',

如何使一个自定义管道生效

  • 单一引入生效
// 功能管道
import { SliceStrPipe } from './SliceStr/slice-str.pipe';

@NgModule( {
  imports: [
    CommonModule
  ],
  declarations: [
    SliceStrPipe  // 管道生效必须放到declarations里面
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})复制代码
  • 模块引入

我们这边,是写了一组管道,然后放到一个自定义模块里面,最后导出

在其他模块引入这个模块就能直接使用了。。

import ..........


const pipe =  [
  IsCitizenIDPipe,
  IsEmailPipe,
  IsEnhancePasswordPipe,
  IsFixedPhonePipe,
  IsLicensePipe,
  IsMobilePhonePipe,
  IsNormalPasswordPipe,
  IsNumberPipe,
  IsUsernamePipe,
  SliceStrPipe,
  TimeDifferencePipe,
  TransDatePipe,
  ThousandSeparationPipe
];

@NgModule( {
  imports: [
    CommonModule
  ],
  declarations: [
    MitPipeComponent,
    ...pipe,
  ],
  exports: [ ...pipe ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MitPipeModule { }



// ----- 引入module

// 管道 -- 把MitPipeModule丢到imports里面就行了
import { MitPipeModule } from '../../../../../widgets/mit-pipe/mit-pipe.module';

总结

管道的写法并不复杂,复杂的是你想要在管道内实现怎么样的功能,考虑拓展性,可读性,复用性!

下一篇扯下自定义指令的~~~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VS Code折腾记 - (2) 快捷键大全,没有更全

    VSCode的快捷键继承了一些IDE风格,有VS的身影,也有Emacs的身影。。简言之,内置快捷键玩熟了,效率提高不是一点两点。

    CRPER
  • React 折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件

    用了react-router-breadcrumbs-hoc,约定式和配置式路由路由皆可用,

    CRPER
  • React 折腾记 - (11) 结合Antd菜单控件(递归遍历组件)及常规优化

    一开始都是手动map去遍历对应的组件, 相关的的组id这些也是简单的判断下children就返回一个值;

    CRPER
  • 【LEETCODE】模拟面试-134-Gas Station

    新生 题目: https://leetcode.com/problems/gas-station/ There are N gas stations alon...

    杨熹
  • SD-WAN的四大错误观念

    当任何技术或服务被大量销售时,可能都会出现一些让人担忧或误解的问题。在SD-WAN环境中,供应商在推销IT管理功能时,SD-WAN可能因为过分被吹捧而偏离它最初...

    SDNLAB
  • LeetCode 442.数组中重复的数据 - JavaScript

    题目描述:给定一个整数数组 a,其中 1 ≤ a[i] ≤ n (n 为数组长度), 其中有些元素出现两次而其他元素出现一次。

    心谭博客
  • Java集合--Queue队列介绍

    贾博岩
  • GAN的入门与实践

    作者:Double_V 编辑:龚 赛 PART 01 GAN 简介 引言 生成对抗网络(Generative Adversarial Nets,GAN)是...

    机器学习算法工程师
  • 美国证券交易委员会系统遭入侵,敏感信息被黑客用于非法获利

    日前, 美国政府机构金融监管部门、美国证券交易委员会(SEC)发布声明,称其财务文件档案系统曾遭遇黑客入侵,且黑客可能已经利用窃取的信息非法获利。 ? 证券交易...

    FB客服
  • 快速学习-HBase实战解密

    Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并能判断一个元素是否属于这个集合。Bloom Filter的这种高效...

    cwl_java

扫码关注云+社区

领取腾讯云代金券