Angular 是当今最流行的前端框架之一。它提供了构建富客户端 Web 应用程序所需的所有功能。Angular 可以让您轻松创建现代 Web 应用程序并提供从开发到生产的工具和最佳实践。
一般来说，Web 应用程序可能需要支持多种语言，以使其更适合全球化的需求。Angular 应用程序的语言本地化是一项很重要的功能，如何快速地实现这个功能呢？今天我们要介绍可以实现这个需求的 npm 包 @ewancoder/angular-localization。
安装
使用 npm 安装：
npm install @ewancoder/angular-localization
用法
先在 app.module.ts 中导入 AngularLocalizationModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- ----------------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------- -- ----
--
---------- ---
---------- --------------
--
------ ----- --------- - -在模板中加入指令：
<span localizationKey='greeting'></span>
在组件中定义字段：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- ----------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------- - ---
------------------- -------------------- -------------------- --
---------- -
------------- - -----------------------------------------------
-
-API
LocalizationService
LocalizationService 是一个服务，可以获取指定键值对应的本地化字符串。它有以下方法：
translate(key: string, options: any): string：获取指定键值对应的本地化字符串。options是一个可选参数，可以用来替换本地化字符串中的变量。示例：
this.greeting = this.localizationService.translate('greeting', { name: 'John' });如果本地化字符串如下：
{
"greeting": "Hello, {{name}}!"
}那么替换后的字符串将是：
Hello, John!
getCurrentLocale(): string：获取当前所使用的语言。
LocalizationDirective
LocalizationDirective 是一个指令，用于向组件模板中添加本地化字符串。它有以下属性：
localizationKey: string：指定需要添加的本地化字符串的键值。
示例代码
定义本地化字符串：
{
"greeting": "Hello, {{name}}!",
"bye": "Bye, {{name}}!",
"language": "Language"
}在 HTML 模板中使用指令 localizationKey：
-- -------------------- ---- ------- --- ----- -------------------------- ------------------------ ----- ------ ---------- ------- ----------------------------------------------- ------- ------------------------------------------ ---- ----- ----------------------------------- -- ---------------- -- ---- --- ----- --------------------- ------------------------ ----- ------ ---------- ----
在组件中使用服务 LocalizationService：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- ----------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
---------------- - ---
-------- - ---
--- - ---
------------------- -------------------- -------------------- --
---------- -
---------------------------------
-
--------------------------- -
------------- - ---------------------------------------------- - ----- ------ ---
-------- - ----------------------------------------- - ----- ------ ---
--------------------- - --------------------------------------------
-
---------------------- ------- -
-------------------------------------------
---------------------------------
-
-在模块中导入模块 AngularLocalizationModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- ----------------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -以上就是使用 @ewancoder/angular-localization 所需的全部步骤。这个插件方便快捷，有很强的可扩展性。如果您的 Angular 应用需要国际化，不妨试试这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0981e8991b448d9a80