前言
随着移动互联网的迅速发展，web 端成为了公司最重要的一个窗口。而为了实现更好的用户体验，多语言国际化已成为 web 端开发中必不可少的一部分。而在 Angular 中，我们可以使用 ng2-translate-localize 这款 npm 包来实现语言国际化。
ng2-translate-localize 简介
ng2-translate-localize 是一款 Angular 的国际化插件，支持多语言切换，使用简单，轻量级，是 Angular 中非常优秀的一个国际化组件。
ng2-translate-localize 安装
使用以下命令安装 ng2-translate-localize：
npm install --save ng2-translate-localize
ng2-translate-localize 用法
导入
TranslateLocalizeModule：在
app.module.ts中导入TranslateLocalizeModule：-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------------- - ---- ------------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ------------------------- ---------- -------------- -- ------ ----- --------- --
在组件中使用：
在 html 中使用
translate指令：<div translate>需要翻译的文本</div>
在 ts 中使用
translate服务：-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------------- - ---- ------------------------- ------------ --------- ----------- --------- ----------------- - ------------------- -- ------ ----- ------------ - ---------------------- ----------------- - -- ------ ------------------------- ------- -- -------- ------------------------------- -- -------- ----- ------------ ------ - --------------------------- ---------------------------------------- - ----------- - ------ - -修改翻译语言：
在组件中使用
TranslateService中的use()方法切换翻译语言：this.translate.use('zh') // 切换到中文翻译
ng2-translate-localize 快捷指令
ng2-translate-localize 提供了一系列指令来帮助我们快速的完成国际化。
-- -------------------- ---- ------- ---- -------------------- ---- --------- -------------------------- ------------------ -- ---------------------- ------------- ------------------------------------- ------------- ------------------------------------- ------------- -------------------------------- ------------------ ------------- --------------------------------- ------------------ ---- ------------- ----------- ---- -- ------- ---- --------------- ------------------- ---------- -- - -- --------------- -------- ---------------
示例代码
-- -------------------- ---- ------- ------ ------ - --------- ------- ----- -- ------- - --------- -- -- ---- - --------- -- -- --- - ---------- ------ ----- -- ------ ----- ------- --------------------------------- -- ---------------- ------- ----------------------------------------- ------
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- -------------------------
------------
--------- -----------
--------- -
------ ------ - --------- -------
-----
-- ------- - --------- --
-- ---- - --------- --
-- --- - ---------- ------ ----- --
------
-----
------- --------------------------------- -- ----------------
------- -----------------------------------------
------
--
--
------ ----- ------------ -
---- - -------------------------
--- - ---
------------------- ---------- ----------------- -
------------------------- -------
-------------------------------
----- ---------- - ---------------------------
--------------------------------------- - ---------- - ------
-
---------------- ------- -
-------------------------
-
-结语
总之，使用 ng2-translate-localize 插件可以方便地进行多语言开发，不仅减少了开发时间，更是提高了用户体验，让用户感受到更好的服务，开发更加精益求精。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551a681e8991b448cf028