如何使用Ionic 6（Angular）获取安卓和iPhone的配置区域？

在Ionic 6搭配Angular的开发中，要获取设备系统层面配置的区域信息，最可靠的方式是使用Capacitor的原生Device插件，它能直接读取安卓/iOS系统设置中的区域和语言配置。

步骤1：安装Capacitor Device插件 #

首先安装插件并同步到原生项目：

npm install @capacitor/device
npx cap sync

步骤2：在Angular组件中实现获取逻辑 #

导入Device模块后，调用对应的API获取区域代码和语言代码：

import { Component } from '@angular/core';
import { Device } from '@capacitor/device';

@Component({
  selector: 'app-region-demo',
  templateUrl: './region-demo.page.html',
  styleUrls: ['./region-demo.page.scss'],
})
export class RegionDemoPage {
  regionData: { regionCode?: string; languageCode?: string } = {};

  async fetchRegionInfo() {
    try {
      // 获取系统区域代码（如CN、US、JP）
      const regionRes = await Device.getRegionCode();
      // 获取系统语言代码（如zh、en、ja）
      const langRes = await Device.getLanguageCode();
      
      this.regionData = {
        regionCode: regionRes.value,
        languageCode: langRes.value
      };
    } catch (err) {
      console.error('获取区域信息失败:', err);
    }
  }
}

步骤3：页面中调用展示 #

在对应的HTML页面添加触发按钮和展示区域：

<ion-content class="ion-padding">
  <ion-button (click)="fetchRegionInfo()">获取系统区域信息</ion-button>
  <div *ngIf="regionData.regionCode">
    <p>系统区域代码: {{ regionData.regionCode }}</p>
    <p>系统语言代码: {{ regionData.languageCode }}</p>
  </div>
</ion-content>

备选：纯Web API方案（兼容性好但有局限） #

如果不需要严格的系统级区域，也可以使用浏览器提供的Web API，但它返回的是浏览器的语言/区域设置，可能和系统配置不一致：

// 获取完整语言区域字符串（如zh-CN、en-US）
const browserLocale = navigator.language;
// 提取单独的区域代码
const regionCode = browserLocale.split('-')[1];

注意事项 #

• Capacitor Device插件不需要额外申请系统权限，直接调用即可。
• 安卓和iOS返回的区域代码均为ISO 3166-1 alpha-2格式的两位大写字母（如CN代表中国，US代表美国）。

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