时间戳

首页 > 解决方案 > Angular ngx-translate 在 en.json 中嵌套翻译？

angular - Angular ngx-translate 在 en.json 中嵌套翻译？

问题描述

我想翻译一个 html 模板中的语句。翻译后的语句本身包含一个翻译管道。这似乎不起作用是否有替代方法？

在 HTML 中：

<div class="description">
        {{ state + "-page.intro-info-description" | translate }}

        <ul class="bullet">
        <li>{{ state + "-page.intro-info-1" | translate }}</li>
        <li>{{ state + "-page.intro-info-2" | translate }}</li>
        <li>{{ state + "-page.intro-info-3" | translate }}</li>
        </ul>

    {{ "intro-info-description" | translate }}

    </div>

en.json:

{
 "intro-info-description": "You can register with 
 {{ 'provider' | translate }} if you can provide the following 
 information:",

"provider:": "Provider"
}

我希望页面说：“如果您可以提供以下信息，您可以向提供商注册：”

相反，它说：

“如果您能提供以下信息，您可以向 {{ 'provider' | translate }} 注册：”

标签： angularngx-translate

解决方案

您可以为此使用 translateParam。

Html 看起来像这样：

{{ state + "-page.intro-info-description" | translate: { provider: (state + "-page.provider" | translate) }}}

或作为一个元素

<p [translate]="state + '-page.intro-info-description'" [translateParams]="{ provider: (state + "-page.provider" | translate)}"></p>

您的 json 文件将如下所示：

{
 "intro-info-description": "You can register with 
 {{provider}} if you can provide the following 
 information:",

"provider:": "Provider"
}

推荐阅读