在开发 Web 应用程序时，多语言的国际化是必不可少的。在 Angular 框架中，i18n 是一个非常有用的工具，可以帮助我们轻松地实现多语言支持。在本文中，我们将学习如何在 Angular 应用程序中使用 i18n。
什么是 i18n？
i18n 是“国际化”的缩写，其中的 “18” 代表了 “i” 与“n” 之间的 18 个中间字符。
i18n 的目的是使应用程序能够轻松地应对多语言需求。使用 i18n，我们可以设计应用程序的界面和内容，使它们适用于不同的语言、地区和文化。
Angular 中的 i18n
在 Angular 应用程序中，我们可以使用 i18n 指令来定义文本，并在运行时将其翻译成不同的语言。
以下是一个例子：
<h1 i18n="An introduction to {{ appName }}.">{{ appName }}：一份简介。</h1>
在这个例子中，我们使用 i18n 指令来定义标题文本，并将应用程序的名称插入到文本中。在运行时，Angular 将根据当前的语言和区域设置自动将文本翻译成不同的语言。
为了支持不同的语言，我们需要为每种语言创建一个翻译文件。这些翻译文件可以是 JSON 文件或 XLIFF 文件。然后，我们需要配置 Angular 来使用这些翻译文件。
以下是一个例子：
-- -------------------- ---- ------- ------ - ----------------- ---------- - ---- ----------------------- ------ - ---------------- --------------- - ---- ---------------------- ------ - ------------------- - ---- ----------------------------- ----------- -------- - ----------------- ------------------------- ------- - -------- ---------------- ----------- ------------------ ----- ------------ - -- -- -------- ----------------- -- ------ ----- -------------------- - - ------ -------- ----------------------- ----------- - ------ --- ------------------------- ----------------- --------- -展开代码
在这个例子中，我们使用 @ngx-translate/core 和 @ngx-translate/http-loader 包来加载和解析翻译文件。
我们提供了一个工厂函数来创建 TranslateHttpLoader，并将其传递给 TranslateModule.forRoot 方法。这个工厂函数使用 HttpClient 来加载翻译文件，并设置文件的位置和扩展名。
现在，我们可以在模板中使用翻译文本。以下是一个例子：
<h1>{{ 'INTRODUCTION' | translate }} {{ appName }}。</h1>
在这个例子中，我们使用 Angular 的管道功能来将翻译文本插入到模板中。我们传递了一个键值 “INTRODUCTION” 和应用程序的名称，这将在翻译文件中查找对应的值，并将其插入到模板中。
示例代码
为了更好地理解 Angular 中的 i18n，我们可以查看下面的代码示例。这个示例演示了如何在 Angular 应用程序中使用 i18n 来实现多语言支持。
首先，我们需要安装必要的依赖：
npm install @ngx-translate/core @ngx-translate/http-loader --save
然后，我们可以创建一个翻译文件，例如 en.json：
{ "INTRODUCTION": "An introduction to", "NAME": "Angular i18n", "TITLE": "{{ INTRODUCTION }} {{ NAME }}." }
为了加载和解析这些翻译文件，我们需要在应用程序的模块中导入 TranslateModule 并进行配置。
-- -------------------- ---- ------- ------ - ----------------------- - ---- --------------------------------------- ------ - ----------------- ---------- - ---- ----------------------- ------ - -------- - ---- ---------------- ------ - ---------------- --------------- - ---- ---------------------- ------ - ------------------- - ---- ----------------------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - ------------------------ ----------------- ------------------------- ------- - -------- ---------------- ----------- ------------------ ----- ------------ - -- -- ---------- --- ---------- -------------- -- ------ ----- --------- - - ------ -------- ----------------------- ----------- - ------ --- ------------------------- ----------------- --------- -展开代码
在 AppComponent 中，我们可以实现国际化的文本。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------------- - ---- ---------------------- ------------ --------- ----------- --------- - ------ ------- - --------- ------- - -- ------ ----- ------------ - ------------------- ---------- ----------------- - ------------------------------- -------------------- - -展开代码
在这个例子中，我们使用了 @ngx-translate/core 的 TranslateService 来设置默认语言并使用翻译文件中的文本。我们传递一个键值 “TITLE”，这将在翻译文件中查找对应的值，并将其插入到模板中。
最后一步是将我们的应用程序放在服务器上运行：
ng serve --open
现在，我们可以访问我们的应用程序并看到翻译后的文本。
总结
i18n 是实现多语言国际化的一种强大工具。在 Angular 应用程序中，我们可以使用 i18n 来设计应用程序的界面和内容，以适应不同的语言、地区和文化。
在本文中，我们学习了如何在 Angular 应用程序中使用 i18n，包括如何定义和加载翻译文件，以及如何在模板中使用翻译文本。
此外，我们还提供了一个示例代码，使您更好地了解如何在 Angular 应用程序中使用 i18n。
通过使用 Angular i18n，我们可以创建可扩展、灵活和易于维护的多语言 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e5258add4f0e0ff75135e
