Angular项目中寻求基于所选国家选择城市/州的npm包或API

嘿，我刚好在几个Angular项目里实现过国家-城市/州的联动功能，给你分享几个亲测好用的方案：

这些包能帮你快速实现联动逻辑，有的还自带UI组件，省不少事：

• @angular-material-extensions/select-country
  如果你用Angular Material的话，这个包简直是量身定做。它自带样式统一的国家选择器，支持搜索、国旗展示，还能无缝联动对应的州/城市数据。内置了常用国家的地区数据，也支持自定义扩展数据源，对i18n的支持也很到位。

• ngx-countries
  轻量级的工具包，专注于国家和地区数据的处理，没有多余的UI依赖。可以轻松和Angular的表单系统集成，适合不需要复杂UI、只想快速获取国家-州数据的场景。

• country-state-city
  纯数据类的包，没有绑定任何UI组件，完全由你自己结合Angular的下拉组件（比如原生select或者Material的mat-select）来实现联动。好处是UI完全可控，内置的数据覆盖了全球大部分国家的州和城市，更新也比较及时。

如果不想依赖本地包的静态数据，想要实时获取最新的地区信息，可以考虑这些API：

• Rest Countries + GeoNames API：先用Rest Countries获取国家的基础信息，再通过GeoNames API根据国家代码拉取对应的州和城市列表。注意GeoNames需要注册免费密钥，请求频率有一定限制。
• OpenWeatherMap Geo API：除了天气数据，它也提供根据国家查询城市的接口，同样需要免费的API密钥，数据更新比较及时。

先安装包：

npm install country-state-city --save

然后在组件里编写联动逻辑：

import { Component } from '@angular/core';
import { Country, State, City } from 'country-state-city';

@Component({
  selector: 'app-country-city-picker',
  template: `
    <div class="picker-group">
      <label>国家</label>
      <select [(ngModel)]="selectedCountryCode" (change)="handleCountryChange()">
        <option value="">请选择国家</option>
        <option *ngFor="let country of allCountries" [value]="country.isoCode">
          {{ country.name }}
        </option>
      </select>
    </div>

    <div class="picker-group" *ngIf="selectedCountryCode">
      <label>州/省</label>
      <select [(ngModel)]="selectedStateCode" (change)="handleStateChange()">
        <option value="">请选择州/省</option>
        <option *ngFor="let state of filteredStates" [value]="state.isoCode">
          {{ state.name }}
        </option>
      </select>
    </div>

    <div class="picker-group" *ngIf="selectedStateCode">
      <label>城市</label>
      <select [(ngModel)]="selectedCity">
        <option value="">请选择城市</option>
        <option *ngFor="let city of filteredCities" [value]="city.name">
          {{ city.name }}
        </option>
      </select>
    </div>
  `,
  styles: [`
    .picker-group { margin: 1rem 0; }
    label { display: block; margin-bottom: 0.5rem; }
    select { padding: 0.5rem; min-width: 200px; }
  `]
})
export class CountryCityPickerComponent {
  allCountries: Country[] = Country.getAllCountries();
  filteredStates: State[] = [];
  filteredCities: City[] = [];

  selectedCountryCode = '';
  selectedStateCode = '';
  selectedCity = '';

  handleCountryChange() {
    this.filteredStates = State.getStatesOfCountry(this.selectedCountryCode);
    // 切换国家后重置州和城市的选择
    this.filteredCities = [];
    this.selectedStateCode = '';
    this.selectedCity = '';
  }

  handleStateChange() {
    this.filteredCities = City.getCitiesOfState(this.selectedCountryCode, this.selectedStateCode);
    this.selectedCity = '';
  }
}

• 如果项目用Angular Material，优先选@angular-material-extensions/select-country，能省很多UI调试的时间；
• 追求UI自定义度的话，country-state-city是最优解；
• 使用API的话，记得做好请求缓存，避免频繁调用导致的限流问题。

内容的提问来源于stack exchange，提问作者DevProf