在前端开发中，常常需要使用电话、电话号码等等与电话有关的信息。然而，不同的国家/地区有着不同的电话号码格式和地理编码。在处理这些信息时，如果没有一个便捷的方法和工具库，将会是一个非常繁琐和复杂的工作。
为了解决这个问题，一些开发者已经开始开发和维护几个便捷的 npm 包，其中一个获得很高评价的 npm 包就是 vipm-ngx-international-phone-number。本篇文章介绍了如何使用这个 npm 包来处理和展示不同时区和国家/地区的电话号码。
安装
首先，需要在你的项目中安装 vipm-ngx-international-phone-number：
npm install --save vipm-ngx-international-phone-number
使用方法
- 导入 PhoneNumberModule
在你的应用中导入 PhoneNumberModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ ----------------------- ---- ---------------------
-----------
-------- -
-------------
---------------------
--
------------- ---
-------- -
---------------------
-
--
------ ----- ------------ - -在您的组件.ts文件：
import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
import { CountryCode } from 'projects/vipm-ngx-international-phone-number/src/lib/models/country-code.enum';
import { Country } from 'projects/vipm-ngx-international-phone-number/src/lib/models/country.model';
import { VipmNgxInternationalPhoneNumberService } from 'projects/vipm-ngx-international-phone-number/src/lib/services/vipm-ngx-international-phone-number.service';- 初始化
在你的组件中引入 vipm-ngx-international-phone-number 服务，并初始化电话号码：
-- -------------------- ---- -------
------ ----- ------------- ---------- ------ -
------ ----------- - ---
------ ---------- ----------
------ ---------------- --------
------ ---------------- --------------- - ------------------------------
------------------- ------------------------ --------------------------------------- - -
---------- -
-------------- - --------------------------------------------
-------------------- - ------------------
----- ----------------- - -----------------------
----- ---- - ------------------------------------------------------------------------------
---------------- - ------------------------------------------------------------------ --------------------------------- -------------------
-
-------------------------------- -------- -
-------------------- - ----------------
----- ----------- - -----------------
----- --------------- - ------------------------------------------------
-- ---------------- --- -- -
----- ----------------- - -----------------------
----- ---- - ------------------------------------------------------------------------------
---------------- - ------------------------------------------------------------------- --------------------------------- -------------------
-
-
-在HTML页面中：
-- -------------------- ---- ------- ------------------- --------------------------- --------------------------- -------------------------------- ----------------------------------- ------------------------------------------------- ----------------------- --------------------------- --------------------------- ---------------- -------------------- ----- -------- ------------------------------ ------------------- ---------------------
- 展示电话号码
在你的项目中，你可以使用 vipm-ngx-international-phone-number 来方便的展示电话号码。下面是一个示例代码：
const phoneNumberUtil = PhoneNumberUtil.getInstance();
const phoneNumberFormat = PhoneNumberFormat.E164;
const phoneNumber = '12345678';
const code = '+86';
const phoneNumberModel = phoneNumberUtil.parse(`${code}${phoneNumber}`, this.selectedCountry.regionCode);
const formattedPhoneNumber = phoneNumberUtil.format(phoneNumberModel, phoneNumberFormat);
console.log(formattedPhoneNumber); // +8612345678结论
vipm-ngx-international-phone-number 是一个非常有用和重要的 npm 包，可以方便的处理和展示不同国家/地区的电话号码，且使用非常简单和灵活。这个 npm 包利用 Google libphonenumber 库并集成在 Angular 中，提供了非常多的国家/地区的信息以及电话号码格式，可以帮助前端工程师快速建立高效和灵活的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e50520b171f02e1df6