介绍
ng2-autocep 是一个基于 Angular 2+ 的 npm 包，用于实现自动完成输入框联想地址功能。它使用了 Viacep API 来查询巴西的邮政编码和地址信息。
在这篇文章中，我们将带领您学习如何使用 ng2-autocep 这个 npm 包，并且详细讲解它的实现原理和使用方法。
安装
你可以通过以下命令安装 ng2-autocep：
npm install ng2-autocep --save
使用
引入模块
首先，你需要在你的模块中引入 Ng2AutocepModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- --------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在模板中使用
<ng2-autocep [(cepModel)]="address.zipCode"
[(addressModel)]="address"
[label]="'CEP'"
[placeholder]="'Digite seu CEP'"
(postcodeEntered)="onPostcodeEntered($event)">
</ng2-autocep>在组件中处理数据
你需要在你的组件中定义和绑定 address 和 zipCode。在这个例子中，我们定义了这样一个 address 对象：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------- - --- ----------
-------------------------- -------- -
------------ - --------
-
-地址对象
为了正常使用 ng2-autocep，你需要定义一个 Address 对象来存储地址信息。这是一个典型的 Address 类型的定义：
export class Address {
zipCode: string;
street: string;
neighborhood: string;
city: string;
state: string;
ibge: number;
}事件绑定
当用户输入完毕邮政编码，你可以通过 postcodeEntered 事件获取 Address 对象中的地址信息。
实现原理
ng2-autocep 引用了 Viacep API，该 API 提供了通过邮政编码查询地址信息的能力。
当用户输入邮政编码时，ng2-autocep 会通过 HTTP 请求来查询相关地址信息。在请求成功后，ng2-autocep 将返回的地址信息转化为 Address 对象格式。
最后，ng2-autocep 会将查询结果赋值给所提供的 Address 对象，以便在你的应用程序中进行后续处理。
结论
ng2-autocep 是一个非常实用的 Angular 组件，它方便了用户输入地址，可以帮助开发者减轻工作量。在使用过程中，你需要定义一个 Address 类型的对象来存储地址信息，并对 postcodeEntered 事件进行处理。
如果你有兴趣了解更多关于 ng2-autocep 的内容，可以查阅 ng2-autocep 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dbfc2