Angular 2 场遮蔽

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

任何帮助将不胜感激。

Thanks.

这是使用 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>

number的值不变，只是显示的值改变