Angular 2: 管道 - 如何格式化 phone 数字？

Question

我到处搜索，但找不到有关格式化 phone 数字的具体信息。

目前，我正在检索 phone 个数字，格式为 JSON，格式如下：

25565115

但是，我想达到这样的效果：

02-55-65-115

为此，我认为我需要使用自定义管道，而且我认为没有内置的自动管道。

你能给我一些指导吗？

Answer 1

您可以在自定义 Angular2 管道中使用类似的东西：

switch (value.length) {
  case 10: 
    country = 1;
    city = value.slice(0, 3);
    number = value.slice(3);
    break;
  
  case 11: 
    country = value[0];
    city = value.slice(1, 4);
    number = value.slice(4);
    break;
  
  case 12: 
    country = value.slice(0, 3);
    city = value.slice(3, 5);
    number = value.slice(5);
    break;
  
  default:
    return tel;
}

查看此 AngularJS 了解更多信息，但正如我所说，您需要将其转换为 Angular2：

http://jsfiddle.net/jorgecas99/S7aSj/

Answer 2

StackBlitz

pipe TS 中的实现看起来像这样

import { Pipe } from "@angular/core";

@Pipe({
  name: "phone"
})
export class PhonePipe {
  transform(rawNum) {
    rawNum = rawNum.charAt(0) != 0 ? "0" + rawNum : "" + rawNum;

    let newStr = "";
    let i = 0;

    for (; i < Math.floor(rawNum.length / 2) - 1; i++) {
      newStr = newStr + rawNum.substr(i * 2, 2) + "-";
    }

    return newStr + rawNum.substr(i * 2);
  }
}

在 NgModule 的声明中声明 PhonePipe

用法：

import {Component} from 'angular/core';

@Component({
  selector: "my-app",
  template: `
    Your Phone Number: <input [(ngModel)]="myNumber" />
    <p>
      Formatted Phone Number: <b>{{ myNumber | phone }}</b>
    </p>
  `
})
export class AppComponent {
  myNumber = "25565115";
}

有很多地方可以改进，我只是让它适用于这个特殊情况。

Answer 3

以“user5975786”为基础，这里是 Angular2 的相同代码

import { Injectable, Pipe } from "@angular/core";

@Pipe({
  name: "phone",
})
export class PhonePipe {
  transform(tel, args) {
    var value = tel.toString().trim().replace(/^\+/, "");

    if (value.match(/[^0-9]/)) {
      return tel;
    }

    var country, city, number;

    switch (value.length) {
      case 10: // +1PPP####### -> C (PPP) ###-####
        country = 1;
        city = value.slice(0, 3);
        number = value.slice(3);
        break;

      case 11: // +CPPP####### -> CCC (PP) ###-####
        country = value[0];
        city = value.slice(1, 4);
        number = value.slice(4);
        break;

      case 12: // +CCCPP####### -> CCC (PP) ###-####
        country = value.slice(0, 3);
        city = value.slice(3, 5);
        number = value.slice(5);
        break;

      default:
        return tel;
    }

    if (country == 1) {
      country = "";
    }

    number = number.slice(0, 3) + "-" + number.slice(3);

    return (country + " (" + city + ") " + number).trim();
  }
}

Answer 4

格式化来自 JSON 数据服务的 phone 数字时，这是我能想到的最简单的解决方案。

<p>0{{contact.phone.home | slice:0:1}}-{{contact.phone.home | slice:1:3}}-{{contact.phone.home | slice:3:5}}-{{contact.phone.home | slice:5:8}}</p>

这会将“25565115”格式化为“02-55-65-115”

希望这对某人有所帮助！

Answer 5

我刚刚撞到了 this article showing how to do that using a Google's lib called libphonenumber。似乎他们在许多不同的语言中使用这个库并且有非常广泛的支持（link 只是针对 JS 包版本）。以下是我如何将其应用到葡萄牙语/巴西语 phone 号码：

第一个：

npm i libphonenumber-js

然后：

# if you're using Ionic
ionic generate pipe Phone

# if you're just using Angular
ng generate pipe Phone

最后：

import { Pipe, PipeTransform } from '@angular/core';
import { parsePhoneNumber } from 'libphonenumber-js';

@Pipe({
  name: 'phone'
})
export class PhonePipe implements PipeTransform {
  transform(phoneValue: number | string): string {
    const stringPhone = phoneValue + '';
    const phoneNumber = parsePhoneNumber(stringPhone, 'BR');
    const formatted = phoneNumber.formatNational();
    return formatted;
  }
}

您可以使用此库实现许多不同的方式。上面有很多很多好用的方法，你自己去看吧，看看适合自己的吧。

喜欢就点赞。 =]

Answer 6

使用正则表达式将数字 25565115 转换为此 02-55-65-115 的简单解决方案

import { Pipe } from "@angular/core";

@Pipe({
  name: "phone"
})
export class PhonePipe {
  transform(value: string): string {
    return value.replace(/(\d{1})(\d{2})(\d{2})(\d{3})/, '0---');
  }
}

Angular 2: 管道 - 如何格式化 phone 数字？

Angular 2: pipes - How to format a phone number?

angular

pipes-filters

用法：