如何在Angular localize库中正确渲染­软连字符？

方法1：使用Unicode软连字符替代HTML实体 #

直接在JSON翻译文件中使用Unicode软连字符（U+00AD），Angular Localize会正确识别并渲染，不会转义。你可以用转义序列\u00AD或者直接输入该字符（多数现代编辑器支持快捷键输入：Windows下Alt+0173，Mac下Option+Shift+Hyphen）。

示例JSON翻译文件：

{
  "home-heading-text": "Folgendes Wort ist sehr lang: Abschieds\u00ADgeschenk"
}

对应的HTML无需修改：

<h1 i18n="@@home-heading-text">Following word is very long: farewell gift</h1>

方法2：通过innerHTML绑定解析HTML实体 #

默认文本绑定会转义所有HTML实体，若要保留­的实体格式，可改用innerHTML绑定，结合$localize服务获取翻译内容：

1. 组件中使用$localize：

import { Component } from '@angular/core';
import { $localize } from '@angular/localize';

@Component({
  selector: 'app-home',
  template: `<h1 [innerHTML]="headingText"></h1>`
})
export class HomeComponent {
  headingText = $localize`@@home-heading-text`;
}

2. JSON翻译文件保持原内容：

{
  "home-heading-text": "Folgendes Wort ist sehr lang: Abschieds­geschenk"
}

方法3：切换到XLIFF格式翻译文件 #

Angular官方推荐的XLIFF（.xlf）格式原生支持HTML内容，不会转义实体字符。

示例XLIFF文件片段：

<trans-unit id="home-heading-text" datatype="html">
  <source>Following word is very long: farewell gift</source>
  <target>Folgendes Wort ist sehr lang: Abschieds&shy;geschenk</target>
</trans-unit>

HTML代码无需修改：

<h1 i18n="@@home-heading-text">Following word is very long: farewell gift</h1>

内容的提问来源于stack exchange，提问作者James Jenkinson