前言
在前端开发中，国际化是一项非常重要的工作。通常我们需要将 UI 文本、日期、货币等内容翻译成多种语言，以满足不同国家和地区的用户需求。对于 Angular 程序来说，有一个名为 @angular/localize 的 NPM 包可以帮助我们完成这项任务。本文将会介绍如何使用该 NPM 包进行国际化开发。
安装和配置
@angular/localize 是一个由 Angular 团队维护的 NPM 包，可以很方便地通过 NPM 安装。我们可以通过以下命令进行安装：
npm install --save @angular/localize
安装完成后，我们需要在 app.module.ts 文件中进行配置。首先，我们需要导入 LocalizeRouterModule：
import { LocalizeRouterModule } from '@gilsdav/ngx-translate-router';然后，在 imports 数组中添加以下代码：
-- -------------------- ---- -------
-------- -
--- -
------------------------------------ -
------- -
-------- ---------------
----------- ----------- ----------------- --------- --------- ------- --------------------- -- --- ----------------------------- --------- ------- ------ ------ ---------- -------- -- ----
----- ------------------ --------- ---------------------
--
-------------------------- -
-------- --------------------------
--------- -------------------------------
-
--
--在上述代码中，我们实例化了一个 LocalizeRouterModule，并进行了配置，包括 LocalizeParser 和 MissingTranslationHandler。
使用和指导
在配置完成后，我们就可以在 Angular 程序中使用 @angular/localize 进行国际化开发了。具体而言，我们需要在应用中使用指令 $localize 来标识待翻译的文本。
简单字符串翻译
对于简单字符串翻译，我们可以在组件模板中使用 $localize 指令来标记待翻译的文本。示例代码如下：
<div>{{ 'Hello, world!' | $localize }}</div>上述代码中，我们使用了 $localize 指令来标记了 "Hello, world!" 的翻译。
带变量的字符串翻译
在 Angular 语言规范中，我们可以使用插值表达式 ({}) 来向待翻译字符串中插入变量。
const string = $localize `I have ${someNumber}`;上述代码中，我们使用了 $localize 来标记待翻译的字符串，并向其中插入一个变量。
复数形式翻译
在有些语言中，同样的句子会因为数量的不同而有不同的表达方式。
const pluralizedString = $localize `{count, plural,
=0 {There are no pencils.}
=1 {There is one pencil.}
other {There are # pencils.}
}`;上述代码中，我们定义了一个复数形式的短句 "There are # pencils."，并使用 {} 来表示数量。
使用 ngx-translate 库和 Angular 路由
除了在应用中使用 $localize 命令进行国际化外，我们还可以使用 ngx-translate 库和 Angular 路由来实现国际化。具体而言，我们可以使用 LocalizeRouterModule 来实现路由的国际化配置。
结语
在本文中，我们介绍了如何使用 @angular/localize NPM 包进行 Angular 程序的国际化开发。无论是对于刚刚接触国际化开发的初学者，还是对于有一定经验的开发人员，都会有所收获。让我们在未来的开发中，更好地满足不同国家和地区的用户需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/presents-localize