Angular中如何获取系统语言设置（非浏览器设置）

首先明确：纯网页版的Angular应用无法直接获取操作系统层面的语言设置——因为浏览器运行在沙箱环境中，受安全策略限制，无法直接访问系统底层信息。以下是几种可行的解决思路：

1. 桌面Angular应用（如Electron）专属方案 #

如果你的Angular应用是打包成桌面端（比如用Electron），可以借助Node.js的os模块读取系统语言：

import * as os from 'os';

// 获取系统locale并转换为标准格式（如en_US → en-US）
const systemLanguage = os.userInfo().locale.replace('_', '-');
console.log(systemLanguage); // 输出类似 en-GB/hi-IN

注意：该方案仅适用于能访问Node.js API的桌面应用，纯网页版无法使用。

2. 通用网页版方案：通过后端接口获取 #

网页版Angular只能通过后端服务间接获取系统语言——后端可以读取服务器环境的语言变量，或者在用户登录场景下，从用户的系统会话信息中提取（比如Windows的USERLOCALE、Linux的LANG变量）。

Angular中调用后端接口的示例：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

fetchSystemLanguage(): void {
  this.http.get<string>('/api/system-language').subscribe(lang => {
    console.log('系统语言:', lang); // 后端返回en-GB/hi-IN等标准格式
  });
}

3. 浏览器API的替代方案（仅作补充） #

navigator.systemLanguage是IE专属API，现代浏览器已不再支持。如果可以接受"浏览器语言与系统语言大概率一致"的场景，可使用以下浏览器标准API：

• navigator.language：返回浏览器当前首选语言（浏览器设置层面）
• navigator.languages：返回浏览器支持的语言数组，第一个元素为首选语言

但需注意：这些值是浏览器的设置，并非严格意义上的系统语言。

4. Angular国际化工具包的配合使用 #

Angular官方的@angular/localize和i18n模块主要用于应用内多语言切换，无法直接获取系统语言，但可以结合上述方案拿到的语言值，配置应用的默认locale：

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeEnGb from '@angular/common/locales/en-GB';
import localeHiIn from '@angular/common/locales/hi-IN';

// 注册需要的locale数据
registerLocaleData(localeEnGb);
registerLocaleData(localeHiIn);

// 假设通过前面的方案获取到了系统语言
const targetSystemLang = 'hi-IN';

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: targetSystemLang }
  ]
})
export class AppModule {}

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