前言
PostcodeAPI 是一个提供邮政编码和地址查询功能的 API。而 ng2-postcodeapi 就是一个 Angular 的封装，帮助 Angular 开发者更方便地使用 PostcodeAPI。
在本文中，我们将详细介绍如何使用 ng2-postcodeapi 包完成邮政编码和地址查询功能。
安装
在继续之前，请确保已经安装了 Angular CLI。
在命令行中输入以下命令来安装 ng2-postcodeapi：
npm install --save ng2-postcodeapi
使用
导入模块
在需要使用 ng2-postcodeapi 的模块中，导入 NgPostcodeApiModule：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------
-----------
-------- -
--------------------
-- ----- -------
--
-- ---
--
------ ----- --------- - -注入服务
在需要使用 ng2-postcodeapi 的组件中，注入 PostcodeApiService：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------ - ---- ------------------ ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- ------------------- ------------------- - - -
获取地址列表
我们可以使用 postcodeApiService 的 getAddresses 方法来获取地址列表。
this.postcodeApiService.getAddresses(postcode: string, houseNumber?: string) .subscribe(addresses => console.log(addresses));
postcode 是必需的参数，用于指定要查询的邮政编码。
当然，在某些情况下，我们可能不止需要 1 个地址。getAddresses 方法还可以通过 houseNumber 参数进行更精确的查询。
获取邮政编码信息
我们可以使用 postcodeApiService 的 getPostcode 方法来获取邮政编码信息。
this.postcodeApiService.getPostcode(address: string) .subscribe(postcode => console.log(postcode));
address 是必需的参数，用于指定地址。
示例代码
app.component.html
<input type="text" placeholder="邮政编码" [(ngModel)]="postcode" (input)="getAddresses()" />
<hr>
<select [(ngModel)]="selectedAddress" (change)="getPostcode()">
<option *ngFor="let address of addresses" [value]="address">{{ address }}</option>
</select>
<hr>
<p>{{ postcodeInfo?.postcode }}</p>app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- ------------ - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
--------- ------ - ---
---------- -------- - ---
---------------- ------ - ---
------------- ------------ - --------- - ----------
------------------- ------------------- ------------------- - -
-------------- -
---------------------------------------------------
-------------------- -- -------------- - -----------
-
------------- -
---------------------------------------------------------
------------------- -- ----------------- - ----------
-
-总结
在本文中，我们介绍了如何使用 ng2-postcodeapi 实现邮政编码和地址查询功能。
通过本文的学习，你已经掌握了如何使用 ng2-postcodeapi 并成功实现一个简单的邮政编码和地址查询功能。
希望本文对你有所帮助。如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd31e