在前端开发中，多语言翻译是必不可少的功能。而对于 Angular 开发者来说，angular-translate 是一个非常好用的多语言支持库。而 angular-translate-storage-cookie 又是一个基于 cookie 的存储插件，可以帮助我们将用户选择的语言存储在 cookie 中，使得用户下一次访问网站时可以直接显示上次选择的语言。
本文将详细介绍如何使用 angular-translate-storage-cookie 进行多语言翻译。
安装
使用 npm 进行安装:
npm install angular-translate-storage-cookie --save
引入模块
在 Angular 项目中，需要在 app.module.ts 中引入 AngularTranslateStorageCookieModule 模块：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ---------------- --------------- - ---- ---------------------- ------ - ------------------- - ---- ----------------------------- ------ - ---------- - ---- ----------------------- ------ - ----------------------------------- - ---- ----------------------------------- ----------- ------------- - ------------ -- -------- - -------------- ---------------------------------------------- -- -- -------------------------------- -- ------------------------- ------- - -------- ---------------- ----------- ------ ----------- -- - ------ --- -------------------------- -- ----- ------------ - -- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
配置
接下来在 app.component.ts 中进行配置：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------------- - ---- ---------------------- ------ - ------------------------------------ - ---- ----------------------------------- ------------ --------- ----------- --------- - ----- ---- ------ -------------------------------------------- ------ --------------------------------------- ----- ------ ------ ------------ - --------- ------- ----- -------------- - --------- ------ -- -- ------ ----- ------------ - ------------------- ---------- ----------------- ------- -------- ------------------------------------- - -- ------ ------------------------- ------- -- ------ ----- ----------- - --------------------------- --------------------------------------------------- - ----------- - ------ -- ------- ----- ---- - ------------------- -- -------------- ----- ------- - ---- -- -------------------------- - ----------- - ----- ----------------------- - --------------------- -------- ---- - ----------------------------- --------------------------- - -展开代码
通过 AngularTranslateStorageCookieService 的 get() 方法获取存储在 cookie 中的语言。如果没有存储，则使用浏览器语言。通过 set() 方法将用户选择的语言存储在 cookie 中。
示例
在 app.component.html 中使用 angular-translate 进行多语言翻译：
<h1>{{ 'HOME.TITLE' | translate }}</h1> <p>{{ 'HOME.CONTENT' | translate }}</p>
在 assets/i18n 目录下创建多语言文件：
en.json:
{ "HOME": { "TITLE": "Welcome to My App", "CONTENT": "This is a simple web application." } }
zh.json:
{ "HOME": { "TITLE": "欢迎来到我的应用", "CONTENT": "这是一个简单的 web 应用。" } }
现在，用户可以通过点击页面上的链接选择使用英文或中文浏览网站，并且下一次访问时会显示上一次选择的语言。
结论
angular-translate-storage-cookie 是一个非常实用的 Angular 多语言插
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39197
