angular6.0+ 自定义管道

以身份证号的部分隐藏为例,话不多说,来看代码;
在common文件夹下中创建管道;
代码如下:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'idNumber' })

export class IdNumberPipe implements PipeTransform {
      transform(value): string {
            let idCard = value.replace(/(^\d{6}|\d{3})(\d{10})(\d{1})(\d{1}|X$)/, "$1**********$3$4");
            return idCard;
      }
}

然后在你需要的地方的 xxxx.module.ts中引入;
如下:

import { IdNumberPipe } from '../../common/IdNumberPipe';

并在@NgModule的 declarations中声明;
如下:

@NgModule({
  declarations: [
    OrderDetailsPage,
    IdNumberPipe
  ],
  providers: [
  ],
  imports: [
    IonicPageModule.forChild(OrderDetailsPage),
  ],
})

OK,现在你可以在HTML文件中用了,

<div class="idcard">{{order.idNumber | idNumber }}</div>

好了,到此结束。。

猜你喜欢

转载自blog.csdn.net/weixin_42049536/article/details/83111309