mcpField
A
angular-i18n

angular-i18n

github.com/oguzhan18开发7194 次安装31 周前更新
代码仓库

关于 angular-i18n

面向 Angular 21 开发者的国际化参考技能，介绍 Angular 应用的本地化实践，涵盖消息提取、多语言构建和运行时翻译方式。

主要功能

  1. 01标记模板文本以便翻译
  2. 02使用 Angular CLI 提取消息
  3. 03构建多个语言版本
  4. 04使用占位符和性别变体
  5. 05在运行时加载翻译

适用场景

  1. 01为翻译准备 Angular 模板
  2. 02生成本地化翻译文件
  3. 03为多个语言构建应用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-i18n

安装后在 Claude Code 中输入/angular-i18n确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular i18n

版本： Angular 21（2025） 标签： i18n、国际化、本地化、翻译

参考： i18n 指南 • Angular Localize

API 变更

本节介绍近期特定版本的 API 变更。

  • 新增：@angular/localize — 内置 i18n 支持

  • 新增：$localize — 消息提取

  • 新增：Angular CLI i18n — 多语言构建

  • 新增：延迟加载翻译 — 运行时翻译加载

最佳实践

  • 标记要翻译的文本
@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 {}
  • 提取消息
ng extract-i18n --output-path src/locale
  • 为多种语言环境构建
ng build --localize
  • 在 angular.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 进行运行时翻译
// Alternative: use @ngx-translate/core
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [TranslateModule.forRoot()]
})
export class AppModule {}
  • 延迟加载翻译
// Using @ngx-translate
this.translate.getTranslation('en').subscribe(translations => {
  // Load translations
});

评论

支持 Markdown