Angular 角度2：管道-如何格式化电话号码？

我到处搜索，找不到关于电话号码格式的具体信息

目前，我正在以以下格式从JSON中检索电话号码：

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$1-$2-$3-$4);
  }
}

为此，我认为我需要使用一个自定义管道，我不认为有一个内置的管道可以自动完成

---

你能告诉我怎么做吗

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

开关（值.长度）{
案例10：
国家=1；
城市=值。切片（0,3）；
数字=值。切片（3）；
打破
案例11：
国家=值[0]；
城市=值。切片（1，4）；
数字=值。切片（4）；
打破
案例12：
国家=值。切片（0,3）；
城市=值。切片（3,5）；
数字=值。切片（5）；
打破
违约：
返回电话；
}

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

pipe

在TS中的实现如下所示

从“@angular/core”导入{Pipe}；
@烟斗({
姓名：“电话”
})
导出类电话管{
变换（rawNum）{
rawNum=rawNum.charAt（0）！=0？“0”+rawNum:“+rawNum；
let newStr=“”；
设i=0；
对于（；i

---

在NgModule的声明中声明PhonePipe

---

用法：

从'angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
您的电话号码：

格式化电话号码：{{myNumber | Phone}}

`
})
导出类AppComponent{
myNumber=“25565115”；
}

有很多地方可以改进，我只是让它在这个特殊情况下工作。

基于“user5975786”，这里是Angular2的相同代码

从“@angular/core”导入{Injectable，Pipe}”；
@烟斗({
姓名：“电话”，
})
导出类电话管{
转换（电话，args）{
var value=tel.toString（）.trim（）.replace（/^\+/，“”）；
if（值匹配（/[^0-9]/）{
返回电话；
}
var国家、城市、编号；
开关（值.长度）{
案例10://+1PPP（购买力平价）###-####
国家=1；
城市=值。切片（0,3）；
数字=值。切片（3）；
打破
案例11://+CPPP#######->CCC（PP）###-####
国家=值[0]；
城市=值。切片（1，4）；
数字=值。切片（4）；
打破
案例12://+CCCPP（第页）###-####
国家=值。切片（0,3）；
城市=值。切片（3,5）；
数字=值。切片（5）；
打破
违约：
返回电话；
}
如果（国家==1）{
国家=”；
}
number=number.slice（0,3）+“-”+number.slice（3）；
返回（国家+“（“+城市+”）+编号）.trim（）；
}
}

从JSON数据服务格式化电话号码时，这是我能想到的最简单的解决方案

<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>

0{{contact.phone.home}切片：0:1}-{{contact.phone.home}切片：1:3}-{{contact.phone.home}切片：3:5}-{{contact.phone.home}切片：5:8}

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

希望这对别人有帮助

我只是在展示如何使用一个名为的谷歌lib来实现这一点时撞了自己一下。似乎他们在许多不同的语言中使用这个库，并且有非常广泛的支持（链接只是到JS包版本）。以下是我如何将其应用于葡萄牙语/巴西电话号码：

第一名：

npm i libphonenumber js

然后：

#如果您使用的是离子
离子管电话
#如果你只是在用角度
ng生成管道电话

最后：

从'@angular/core'导入{Pipe，PipeTransform}；
从'libphonenumber js'导入{parsePhoneNumber}；
@烟斗({
姓名：“电话”
})
导出类PhonePipe实现PipeTransform{
转换（phoneValue:number | string）：string{
const stringPhone=phoneValue+''；
const phoneNumber=parsePhoneNumber（stringPhone，'BR'）；
const formatted=phoneNumber.formatNational（）；
返回格式；
}
}

您可以使用这个库实现许多不同的方法。有很多很多方便的方法，你可以去阅读，看看它如何适合你

---

竖起大拇指如果你喜欢的话。=]

使用正则表达式将数字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$1-$2-$3-$4);
  }
}

---

这比公认的效果要好得多。使用

var value=tel.toString（）.trim（）.replace（/^\+\124;-\ 124;\（|\）/g，，）

来修剪所有额外的字符后，我的效果非常好。非常简单！KISS，保持ISS.true，使用10行代码的格式化程序是鲁莽的。就地区和规则而言，电话号码有很多不同之处。。。我们可能应该使用谷歌的lib。几年前我使用过它，在实现itI的过程中，我学到了很多细节。在您传递

PhonePipe

的组件中，您不需要像这样首先导入它吗<代码>从“/pipe”导入{PhonePipe}