将参数和 HTML 注入 ngx-translate 密钥

Question

这可能吗？假设我有以下文本要翻译：

<p>You currently have <span class="bold">{{rewards?.points}}</span> points worth <span class="bold">{{rewards?.amount | currency}}</span> statement credit.</p>

我希望这段文本是可翻译的，但有两件事让我感到困惑 - 如何注入变量点数/数量以及如何保留粗体跨度标签。

从我的 en-US.json 文件：

"statement": "You currently have {{points_param}} points worth {{credit_param}} statement credit."

如果我想对点/数量使用静态值，则执行以下操作，但这不会保留粗体样式或允许使用变量值。

<p [innerHTML]="'redeem.statement' | translate:{points_param:'50',credit_param:'100'}"></p>

Answer 1

试试这个代码：

en-US.json 文件：

"statement": "You currently have <span class='bold'>{{points_param}}</span> points worth <span class='bold'>{{credit_param}} </span> statement credit."

在组件 HTML 文件中：

<p [innerHTML]="'redeem.statement' | translate:{points_param:'50',credit_param:'100' | currency }"></p>

确保应该为 span 粗体类添加 CSS。