Angular是一款优秀的前端框架，它的i18n国际化解决方案，可以让我们轻松地在程序中嵌入多语言支持。通过国际化，我们可以针对不同的用户群体提供定制化的体验，提高应用的可用性和用户满意度。本文将详细介绍Angular2中的i18n国际化解决方案，并提供示例代码和实用性的指导意义。
Angular2的国际化机制
Angular2提供了一个基于标记的i18n解决方案，能够轻松支持多语言。这种解决方案遵循着"翻译被应用"的原则，把标记的翻译与应用逻辑分离开来，减少了临时的字符串和多余的HTML属性。
Angular2的i18n支持三个角色：
- 开发者：编写代码和视图，并注入基础信息。
- 翻译者：将标记翻译成相应的语言。
- 终端用户：根据本地语言，得到翻译后的应用。
Angular2的i18n机制是通过一个标记，称为i18n标记，来指定需要被翻译的文本。这个标记包含了一个翻译前的文本和一个翻译后的文本。翻译后的文本可以是静态的或者动态的。
Angular2的i18n指令
Angular2中提供了一些指令来支持国际化：
i18n
i18n指令告诉Angular这个元素或属性需要被翻译。它使用 i18n 标记来标识被翻译的文本。
<div i18n="@@description">This is my description</div>
该示例中使用 @@description 来标识description文本需要被翻译。这个指令还支持其他属性，以便更好地定制化你的i18n。
i18n-placeholder
i18n-placeholder 指令是一个特殊的标记，用于指定输入框的 placeholder 属性。
<input type="text" placeholder="Name" i18n-placeholder="@@Name">
这个示例中使用 @@Name 来表示 Name 属性需要翻译。
i18n-title
i18n-title 指令可以用来指定元素的 title 属性。
<div i18n-title="@@tooltip">Click me to see more information</div>
在这个示例中，tooltip 属性将被翻译成相应的语言。
i18n-aria-label
有时候改变输入框的 placeholder 需要和 aria-label属性一起使用，使用 i18n-aria-label 指令可以指定这个标签。
<input type="text" aria-label="Search" i18n-aria-label="@@Search">
同样的，这个示例中 Search 属性将被翻译成相应的语言。
Angular2的模板文件
i18n标记通常用 {{}} 包裹，以便在HTML模板中使用。
<span>{{'@@good-morning'}}</span>然而，在Angular中的表达式通常不应该包含多余空格。如果标记文本包含空格，应使用如下包裹方式：
<span i18n="@@how-are-you">How are you ?</span>
我们可以通过翻译文件来自定义i18n的翻译，下面是一个简单的翻译文件：
{
"@@welcome": "Welcome",
"@@good-morning": "Good morning",
"@@how-are-you": "How are you ?"
}翻译文件可以导入到应用程序中，以支持运行时的翻译。在编译应用程序时可以通过 angular compiler 把i18n标记替换为相应的翻译文件。
Angular2的术语管理
Angular2的i18n机制还可以支持术语管理。术语管理能够提高应用的一致性和可维护性。你可以通过一个翻译文件来统一维护应用中所有的术语。
一般而言，我们需要翻译一个术语的所有变体形式，所以我们需要在翻译文件中维护一个 key，这个 key 与所有变体形式相关联。
{
"@@welcome": "欢迎",
"@@welcome2": "欢迎",
"@@welcome3": "欢迎",
……
"@@welcome1000": "欢迎"
}Angular2中提供了 ngx-translate/core 来实现应用中的术语管理，它提供了词典和插值等特性，它的使用方式类似于i18n，使用 TranslateService 和 TranslatePipe 来实现。
import { TranslateService } from '@ngx-translate/core';
export class AppComponent implements OnInit {
constructor(private translate: TranslateService) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');
}
}在这个示例中，我们导入了 TranslateService 并将 en 和 fr 这两种语言作为我们支持的语言。然后我们使用 setDefaultLang 来设置默认的语言。
示例代码
下面是一个展示i18n和翻译的示例代码：
-- -------------------- ---- ------- -- --------------------- -- -- ------- - -------------------------- ------ ----------- ------------------ -------------------------- ------ ----------- ------------------- --------------------------- ------- ---- ----------------------------------------------- ------------------------- ---- --- ----------- -------- -- ---------- ---------------------------------------------------- ----- ---------------------------
下面是这个示例的翻译文件：
-- -------------------- ---- ------- - ------------ ------- - ------------------------ ------------------- ---------- --------- ----- ----------- ----- ------------ ----------- ------------ ----- ------------- -------- ---------------------- ----------------- ---------- -
在这个示例中，我们分别使用了 i18n、i18n-placeholder、i18n-aria-label 和 i18n-title这些指令。还在页面中添加了一个列表，用户可以选择他们喜欢的语言。
总结
Angular2的i18n机制能够轻松地实现国际化，提高应用程序的可访问性。我们可以通过指令、模板以及导入翻译文件等方式来实现i18n。当我们需要管理成百上千的术语时，可以使用 ngx-translate/core 技术栈来实现，这能够对我们的应用程序带来巨大的维护性等好处。在今后的开发过程中，我们可以逐步了解和应用Angular2的i18n机制，以提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fab47ff6b2d6eab3189753