1. 设置 Angular 应用以支持 i18n：
在你的Angular项目中，确保已经启用了i18n。你可以使用以下命令初始化一个支持i18n的Angular应用：
ng new my-i18n-app --i18n
2. 在模板中使用自定义ID：
在你的组件模板中，使用i18n属性为标记文本提供自定义ID：
<!-- app.component.html -->
<div>
<h1 i18n="@@welcomeHeader">Welcome to my app!</h1>
<p i18n="@@welcomeText">Thank you for using our application.</p>
</div>
在上面的例子中，@@welcomeHeader和@@welcomeText是自定义的ID，你可以根据需要定义更有意义的ID。
3. 提取翻译字符串：
运行以下命令来提取需要翻译的字符串：
ng extract-i18n
这将生成一个messages.xlf文件，其中包含需要翻译的文本和自定义ID。
4. 编辑翻译文件：
打开messages.xlf文件，将其中的文本翻译成目标语言，并确保为每个自定义ID提供了合适的翻译。
5. 编译翻译文件：
运行以下命令来编译翻译文件：
ng xi18n
这将生成一个翻译后的文件，通常是messages.xx.xlf（xx代表目标语言代码）。
6. 在应用中使用翻译文件：
在app.module.ts中配置翻译文件：
import { registerLocaleData } from '@angular/common';
import localeEn from '@angular/common/locales/en';
registerLocaleData(localeEn);
@NgModule({
...
providers: [
{ provide: LOCALE_ID, useValue: 'en' },
...
],
...
})
确保在应用程序中加载正确的翻译文件。
7. 在模板中使用翻译：
在模板中使用翻译服务并使用自定义ID：
<!-- app.component.html -->
<div>
<h1 i18n="@@welcomeHeader">Welcome to my app!</h1>
<p i18n="@@welcomeText">Thank you for using our application.</p>
</div>
使用Angular的i18n功能，你可以在模板中使用自定义ID管理标记文本，并轻松地实现多语言支持。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4977/Angular