angular - 将参数和 HTML 注入(inject) 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>

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

从我的 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。