angular-i18n

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular i18n

Version: Angular 21 (2025) Tags: i18n, Internationalization, Localization, Translations

References: i18n Guide • Angular Localize

版本： Angular 21 (2025) 标签： i18n, 国际化, 本地化, 翻译

参考资料： i18n指南 • Angular Localize

API Changes

API变更

This section documents recent version-specific API changes.

NEW: @angular/localize — Built-in i18n support
NEW: $localize — Message extraction
NEW: Angular CLI i18n — Multiple language builds
NEW: Lazy-loaded translations — Runtime translation loading

本部分记录了近期特定版本的API变更。

新增：@angular/localize — 内置i18n支持
新增：$localize — 消息提取
新增：Angular CLI i18n — 多语言构建
新增：懒加载翻译 — 运行时翻译加载

Best Practices

最佳实践

Mark text for translation

@Component({
  template: `
    <h1 i18n="@@welcome">Welcome to our app!</h1>
    <p i18n="@@greeting">Hello, world!</p>
  `
})
export class HomeComponent {}

Use translations with placeholders

@Component({
  template: `
    <p i18n="@@userCount">
      There are { count, plural, =0 { no users } =1 { one user } other { {{ count }} users } } in the system.
    </p>
  `
})
export class UsersComponent {
  count = 5;
}

Use gender-specific translations

@Component({
  template: `
    <p i18n="@@message">
      { gender, select, male {He} female {She} other {They} } is attending.
    </p>
  `
})
export class MessageComponent {}

Extract messages

bash

ng extract-i18n --output-path src/locale

Build for multiple locales

bash

ng build --localize

Configure locales in angular.json

json

{
  "projects": {
    "my-app": {
      "i18n": {
        "locales": {
          "en": "src/locale/messages.en.xlf",
          "es": "src/locale/messages.es.xlf",
          "fr": "src/locale/messages.fr.xlf"
        }
      }
    }
  }
}

Use i18n attribute for elements

@Component({
  template: `
    <img i18n-title title="Logo" src="logo.png" />
    <a i18n-href href="/about" hreflang="es">About</a>
  `
})
export class HeaderComponent {}

Use @angular/localize for runtime translations

import { $localize } from '@angular/localize';

$localize`:@@greeting:Hello, ${name}:name:World!`;

Use ngx-translate for runtime translations

// Alternative: use @ngx-translate/core
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [TranslateModule.forRoot()]
})
export class AppModule {}

Lazy load translations

// Using @ngx-translate
this.translate.getTranslation('en').subscribe(translations => {
  // Load translations
});

标记需要翻译的文本

@Component({
  template: `
    <h1 i18n="@@welcome">Welcome to our app!</h1>
    <p i18n="@@greeting">Hello, world!</p>
  `
})
export class HomeComponent {}

配合占位符使用翻译

@Component({
  template: `
    <p i18n="@@userCount">
      There are { count, plural, =0 { no users } =1 { one user } other { {{ count }} users } } in the system.
    </p>
  `
})
export class UsersComponent {
  count = 5;
}

使用性别特定的翻译

@Component({
  template: `
    <p i18n="@@message">
      { gender, select, male {He} female {She} other {They} } is attending.
    </p>
  `
})
export class MessageComponent {}

提取消息

bash

ng extract-i18n --output-path src/locale

多locale构建

bash

ng build --localize

在angular.json中配置locale

json

{
  "projects": {
    "my-app": {
      "i18n": {
        "locales": {
          "en": "src/locale/messages.en.xlf",
          "es": "src/locale/messages.es.xlf",
          "fr": "src/locale/messages.fr.xlf"
        }
      }
    }
  }
}

为元素使用i18n属性

@Component({
  template: `
    <img i18n-title title="Logo" src="logo.png" />
    <a i18n-href href="/about" hreflang="es">About</a>
  `
})
export class HeaderComponent {}

使用@angular/localize实现运行时翻译

import { $localize } from '@angular/localize';

$localize`:@@greeting:Hello, ${name}:name:World!`;

使用ngx-translate实现运行时翻译

// 替代方案：使用@ngx-translate/core
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [TranslateModule.forRoot()]
})
export class AppModule {}

懒加载翻译

// 使用@ngx-translate
this.translate.getTranslation('en').subscribe(translations => {
  // Load translations
});