Angular的i18n用于带有选择器的属性可以通过以下步骤来解决:
i18n
指令来标记需要进行国际化的文本。在这个例子中,我们将使用一个带有选择器的属性作为示例。
Hello World!
$localize
函数,并使用它来定义选择器的属性。import { Component } from '@angular/core';
import { $localize } from '@angular/localize';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent {
title = $localize`:@@title:World`;
}
在项目的根目录下,创建一个.xlf
文件,用于存储国际化翻译。在这个例子中,我们将文件命名为messages.xlf
。
使用Angular的ng xi18n
命令来提取i18n
标记的文本,并生成.xlf
文件。
ng xi18n --outputPath=src/locale
这将在src/locale
目录下创建一个messages.xlf
文件。
messages.xlf
文件,并为选择器的属性添加翻译。
World
Translated text
.angular.json
文件中,添加i18n
配置,指定使用的语言和翻译文件。"i18n": {
"sourceLocale": "en",
"locales": {
"zh": "src/locale/messages.zh.xlf"
}
}
ng serve --configuration=zh
命令来启动应用程序,并使用指定的语言配置运行应用程序。ng serve --configuration=zh
现在,当应用程序运行时,选择器的属性将被翻译为指定的语言。