在使用$localize函数时,应在相应的template文件中定义i18n标签,并在其中添加一个i18n-id属性和一个i18n-description属性,以便i18n工具可以在运行时轻松解析不同语言版本的字符串。 以下是一个示例:
HTML模板
Hello, world!
在.ts文件中使用
import { Component } from '@angular/core';
import { $localize } from '@angular/localize';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
showMessage() {
const greeting: string = $localize`:@@GREETING:Hello, world!`;
console.log(greeting);
}
}
在这个示例中,i18n工具会在运行时将Hello, world!字符串翻译成不同的语言版本,并将其替换为相应的翻译文本。在.ts文件中,我们使用$localize函数来设置所需的翻译文本。@@hello-world是i18n标签的名称,GREETING是i18n-id属性的值。i18n-description属性是可选的,用于提供有关消息的更多上下文信息。
通过使用i18n标签以及i18n-id和i18n-description属性,我们可以确保$localize函数返回正确的翻译文本,无论是在源语言还是在目标语言中。