Angular 2 场掩蔽答案

【问题标题】：Angular 2 Field MaskingAngular 2 场掩蔽
【发布时间】：2017-12-07 17:13:51
【问题描述】：

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

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： angular masking

【解决方案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>

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

【讨论】：

法利，我认为这对于静态变量是可能的。动态变量怎么样。考虑用户在文本框中输入电话号码必须屏蔽。

【解决方案2】：

您可以为它创建一个管道，如下所示：

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

@Pipe({
  name: 'mask'
})
export class NumberMaskPipe implements PipeTransform {
  transform(number: string): string {
    const visibleDigits = 4;
    let maskedSection = number.slice(0, -visibleDigits);
    let visibleSection = number.slice(-visibleDigits);
    return maskedSection.replace(/./g, '*') + visibleSection;
  }
}

在你的组件中你可以这样做：

export class PhoneNumberComponent implements OnInit {
  phoneNumber: string;

  constructor() {}

  ngOnInit() {
    this.phoneNumber = "2131232131238867";
  }
}

终于在组件中：

<p>Your phone number is: {{ phoneNumber | mask }}</p>

这里的管道是动态的，所以即使用户输入不同的数字，它也只会屏蔽直到最后四位数字，而不是最后四位数字。请尝试使用不同位数的示例。

这是一个工作的 plunker：https://plnkr.co/edit/NKRQpVB1Darw8MxrqucP?p=preview

【讨论】：

【解决方案3】：

您可以发布一些代码，我们不应该猜测它。

无论如何，你可以创建一个这样的对象

let phoneBundle = {
    realPhone: '123-123-1234',
    displayPhone: 'xxx-xxx-' + this.phoneBundle.realPhone.substr(-1, 4)
};

【讨论】：