Angular 2 场掩蔽

Question

我想屏蔽一个字段，例如:电话号码为 10 位 (123-123-1234) 我需要以 (xxx-xxx-1234) 的方式屏蔽。此外，在提交页面时，我需要将原始变量 (123-123-1234) 发送到服务。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

这是使用 Angular 管道的一个很好的例子:

创建管道:mask.pipe.ts:

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

@Pipe({ name: 'mask' })
export class MaskPipe implements PipeTransform {
    transform(phrase: string) {    
        let toBeReplaced = phrase.slice(0, 7);
        return phrase.replace(toBeReplaced, "xxx-xxx");
    }
}

将管道放在模块的声明中:

import { MaskPipe } from "./mask.pipe";
@NgModule({
    declarations: [ MaskPipe ]
    // ...
})

在模板中使用管道:

//组件类:

export class AppComponent  {
    number: string = "123-123-1234";
}

//组件模板:

<h1> {{ number | mask }}</h1>

数字的值不变，只是显示值改变