Я искал здесь и там, и я не могу найти что-то конкретное относительно форматирования номера телефона.
В настоящее время я получаю телефонные номера из JSON в следующем формате:
25565115
Однако я хочу достичь этого результата:
02-55-65-115
Для этого я считаю, что мне нужно использовать настраиваемый канал, и я не думаю, что есть встроенный, который делает это автоматически.
Не могли бы вы дать мне несколько советов о том, как это сделать?
pipe реализация в TS будет выглядеть следующим образом
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';
}
}
Есть много вещей, которые можно улучшить, я просто сделал это для этого конкретного случая.
Основываясь на "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();
}
}
При форматировании телефонных номеров из службы данных 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"
Надеюсь, это поможет кому-то!
Вы можете использовать что-то подобное в пользовательском конвейере 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:
Я только что натолкнулся на эту статью, показывающую, как это сделать, используя библиотеку Google с именем libphonenumber. Кажется, они используют эту библиотеку во многих разных языках и имеют очень широкую поддержку (ссылка только на версию пакета 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;
}
}
Вы можете реализовать много разных способов с этой библиотекой. Там много, много удобных методов, вы можете просто прочитать и посмотреть, как вам это подходит.
Недурно, если вам понравилось. знак равно