要在Angular应用程序中使用国际化(i18n),可以按照以下步骤进行操作:
npm install @angular/localize
angular.json
文件中配置i18n选项:{
"projects": {
"your-project-name": {
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": "src/locale/messages.fr.xlf",
"es": "src/locale/messages.es.xlf"
}
}
}
}
}
其中,sourceLocale
是默认语言,locales
是其他语言的配置。
Welcome!
import { Component } from '@angular/core';
import { $localize } from '@angular/localize';
@Component({
selector: 'app-example',
template: `
{{ welcomeMessage }}
`
})
export class ExampleComponent {
welcomeMessage = $localize`:@@welcomeMessage:Welcome!`;
}
在HTML模板中,使用i18n="@@welcomeMessage"
标记翻译的消息。在TypeScript文件中,使用$localize
函数来获取翻译后的消息。
ng extract-i18n --output-path src/locale
执行此命令后,将会在src/locale
目录下生成默认语言的翻译文件messages.xlf
,以及其他语言的翻译文件。
ng build --configuration=fr
在构建应用程序时,使用--configuration
选项指定要使用的语言配置。
这样,Angular应用程序就可以根据用户的语言环境自动加载相应的翻译文件,并显示相应的翻译内容。