在前端开发中，我们通常需要处理包含 HTML 标签的字符串。如果我们想要把这些字符串翻译成多语言，我们需要使用 Angular-Translate 这个库来完成。
什么是 Angular-Translate？
Angular-Translate 是一个 AngularJS 库，用于实现前端应用程序的国际化和本地化。它提供了许多功能，如多语言支持、插值、文件加载、动态切换语言等等。
处理包含 HTML 的字符串
当我们需要翻译包含 HTML 标签的字符串时，我们需要使用 Angular-Translate 提供的 $translate 模块的 sanitizeValueStrategy 方法。sanitizeValueStrategy 方法有两个选项：
- 'escaped'：将标签转义为实体字符。
- 'sanitize' ：允许包含 HTML 标签。
因为我们需要保留 HTML 标签，所以我们必须使用 'sanitize' 选项。
angular.module('myApp', ['pascalprecht.translate'])
.config(function ($translateProvider) {
$translateProvider.useSanitizeValueStrategy('sanitize');
})这样做之后，我们就可以在翻译字符串中使用 HTML 标签了，例如：
<p translate>Hello <strong>{{name}}</strong>!</p>在这个例子中，我们使用了 <strong> 标签来强调名字。当我们翻译这个字符串时，<strong> 标签将被保留。
示例代码
下面是一个完整的示例，演示如何使用 Angular-Translate 处理包含 HTML 标签的翻译字符串：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
------------------------ ---------------
-------
------
---- ------------------------------
------ ---------- - --------- -------
-- --------------- ------------------------------
------
------- ------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------------------------
--------
----------------------- ---------------------------
---------------- -------------------- -
------------------------------------- -
----------- ----------
---
------------------------------------- -
----------- ------------
---
-------------------------------------------
--------------------------------------------------------
--
---------------------------- -------- -------- ----------- -
----------- - -------- -----------
--------------------- - -------- ----- -
--------------------
--
---
---------
-------
-------在这个示例中，我们定义了两种语言：英语和法语。当用户选择不同的语言时，页面上的文本将自动更新。我们还使用了 <strong> 标签来强调名字，并且该标签将被保留。
结论
Angular-Translate 是一个非常有用的库，可以帮助我们轻松地实现前端应用程序的国际化和本地化。当我们需要处理包含 HTML 标签的字符串时，我们可以使用 sanitizeValueStrategy 方法，并选择 'sanitize' 选项来保留 HTML 标签。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25425