Angular 是一个流行的前端框架，可以帮助我们快速构建现代 Web 应用程序。在实现全球化的应用程序时，国际化是一个重要的问题。在本文中，我们将介绍如何使用 Angular CLI 生成一个国际化应用程序。
什么是国际化？
国际化是指将应用程序设计为可以适应不同的语言和文化的过程。通过国际化，我们可以使应用程序在不同的地区和语言环境下使用，提高用户的体验和可用性。
Angular CLI
Angular CLI 是一个命令行工具，可以帮助我们快速生成和开发 Angular 应用程序。使用 Angular CLI，我们可以生成组件、服务、模块等等，还可以构建和打包应用程序。
生成国际化应用程序
首先，我们需要安装 Angular CLI。在终端中输入以下命令：
npm install -g @angular/cli
安装完成后，我们可以使用以下命令来创建一个新的 Angular 应用程序：
ng new my-app
这将创建一个名为 "my-app" 的新 Angular 应用程序。接下来，我们需要使用 Angular CLI 来生成国际化相关的文件。在终端中输入以下命令：
ng generate module app-translate --flat
这将在应用程序的根目录下创建一个名为 "app-translate" 的新模块。接下来，我们需要使用 Angular CLI 来生成翻译文件。在终端中输入以下命令：
ng xi18n --output-path src/locale
这将生成一个名为 "messages.xlf" 的翻译文件，并将其保存在 "src/locale" 目录下。
接下来，我们需要在应用程序中添加国际化支持。我们可以使用 Angular 的内置 i18n 指令来实现这一点。在应用程序的根组件中，我们可以添加以下代码：
<p i18n="@@helloWorld">Hello, world!</p>
这将创建一个带有 "helloWorld" 标识符的翻译字符串。接下来，我们需要在 "app-translate" 模块中导入和配置 Angular 的 i18n 模块。在 "app-translate.module.ts" 文件中，我们可以添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ----------------------
-----------
------------- ---
-------- -
-------------
-------------------------
---------------- -----
--------------- -----
--
--
-------- -----------------
--
------ ----- ------------------ - -这将导入和配置 ngx-translate 模块，使我们能够在应用程序中使用国际化功能。
最后，我们需要在应用程序的根模块中导入和配置 "app-translate" 模块。在 "app.module.ts" 文件中，我们可以添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- -------------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这将导入和配置 "app-translate" 模块，并使其可用于整个应用程序。
示例代码
以下是一个完整的示例代码，展示了如何使用 Angular CLI 生成国际化应用程序：
<!-- app.component.html --> <p i18n="@@helloWorld">Hello, world!</p>
-- -------------------- ---- -------
-- -----------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ----------------------
-----------
------------- ---
-------- -
-------------
-------------------------
---------------- -----
--------------- -----
--
--
-------- -----------------
--
------ ----- ------------------ - --- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- -------------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -结论
在本文中，我们介绍了如何使用 Angular CLI 生成一个国际化应用程序。我们学习了如何使用 Angular 的内置 i18n 指令和 ngx-translate 模块来实现国际化。希望这篇文章能够帮助你构建更好的全球化应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6754119f1b963fe9cc4bfd84