Question

我在这里和那里搜索过，我无法找到有关格式化电话号码的具体信息。

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

25565115

但是，我想实现这个结果：

02-55-65-115

为此，我认为我需要使用自定义管道，我不认为有一个内置管道会自动执行。

您能否就如何操作给我一些指导？

Answer 1

PLUNKER

TS 中的

pipe实现看起来像这样

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'phone'
})
export class PhonePipe{
    transform(val, args) {
        val = val.charAt(0) != 0 ? '0' + val : '' + val;
        let newStr = '';

        for(i=0; i < (Math.floor(val.length/2) - 1); i++){
           newStr = newStr+ val.substr(i*2, 2) + '-';
        }
        return newStr+ val.substr(i*2);
    }
}

用法：

import {Component} from 'angular2/core';

@Component({
  selector: 'demo-app',
  template: '<p>{{myNumber | phone }}</p>',
  pipes: [PhonePipe]
})
export class App {
  constructor() { 
    this.myNumber= '25565115';
  }
}

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

Answer 2

在“user5975786”的基础上，这里是Angular2的相同代码

  <li>
      <?php

                    if(isset($_SESSION['username'])) {

                      echo '<li><a href="#">'. $_SESSION["username"] . '</a></li>';
                      echo '<li>
                            <a href="config/logout.php" id="logout">Log Out</a></li>';
                    } else {
                    echo '<a class="signing" href="#login" data-toggle="modal" data-target="#signIn">Login </a>';
                    }
      ?>
 </li>

Answer 3

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

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

希望这有助于某人！

Answer 4

我只是碰触了this article，展示了如何使用名为libphonenumber的 Google的库来做到这一点。似乎他们以多种不同的语言使用此库，并且具有非常广泛的支持（链接仅指向JS软件包版本）。这是我对葡萄牙语/巴西电话号码实施的方法：

第一

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

}

您可以使用此lib实现许多不同的方式。上面有很多方便的方法，您可以阅读并查看它如何适合您。

竖起大拇指（如果喜欢）。 =]

Answer 5

您可以在自定义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 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$1-$2-$3-$4);
  }
}

Angular2 {pipes} - 如何格式化电话号码？

6 个答案:

用法：