Angular AOT编译下如何在运行时获取当前Locale？

我来帮你搞定AOT编译下获取Locale ID的问题，其实方法很直接，完全符合你的要求——不用靠主机名推断，直接就能拿到编译时指定的Locale值：

1. 直接注入LOCALE_ID令牌 #

当你通过ng serve --aot --locale=fr这类命令指定Locale时，Angular在AOT编译过程中会自动把LOCALE_ID的值设置为你指定的fr。你不需要手动在providers里配置，直接在组件或服务中注入这个令牌就能拿到当前Locale ID：

import { Component, Inject } from '@angular/core';
import { LOCALE_ID } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <!-- 根据Locale显示/隐藏元素 -->
    <div *ngIf="currentLocale === 'fr'">
      这是法语用户专属内容
    </div>
    <div *ngIf="currentLocale === 'en'">
      This content is only visible to English users
    </div>
  `
})
export class YourComponent {
  currentLocale: string;

  constructor(@Inject(LOCALE_ID) locale: string) {
    this.currentLocale = locale;
    console.log('当前Locale:', this.currentLocale); // 输出 'fr'
  }
}

2. 用服务统一管理Locale（可选） #

如果多个组件都需要用到Locale信息，可以创建一个Locale服务，注入LOCALE_ID后统一暴露这个值，方便其他组件调用：

import { Injectable, Inject } from '@angular/core';
import { LOCALE_ID } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocaleService {
  currentLocale: string;

  constructor(@Inject(LOCALE_ID) locale: string) {
    this.currentLocale = locale;
  }

  getCurrentLocale(): string {
    return this.currentLocale;
  }
}

然后在组件中使用这个服务：

import { Component } from '@angular/core';
import { LocaleService } from './locale.service';

@Component({
  selector: 'app-another-component',
  template: `
    <p>当前语言: {{ localeService.getCurrentLocale() }}</p>
  `
})
export class AnotherComponent {
  constructor(public localeService: LocaleService) {}
}

为什么这个方法适用于AOT？ #

你提到JIT模式下需要手动配置providers，但AOT模式下，当你通过命令行参数指定--locale时，Angular的编译工具会自动为LOCALE_ID设置对应的提供者，所以你不需要额外配置，直接注入就能拿到正确的值，完美匹配你“不愿推断Locale”的需求。

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