Angular Boolean Pipe是/否本地化

Question

我需要一种方便的方式来使我的Yes-no管道本地化，例如日期管道 {{my.date |日期：'short'：'utc'：'de-de-de'}}

类似

    {{ my.boolean | yesNo : "de-DE" }}

，而不是返回value？ “是”：“否”;我需要一些魔术：D

    @Pipe({
      name: 'yesNo'
    })
    export class YesNoPipe implements PipeTransform {
    
      transform(value: boolean, ...args: unknown[]): string {
        // need some magic
        return value ? localizedYes : localizedNo;
      }
    
    }

Answer 1

我建议在Angular的内置国际化中使用“选择”功能来翻译布尔值：

步骤1-遵循角文档中概述的步骤，在您的应用程序中设置国际化。这里有一个很好的教学视频： https://angular.io/guide/i18n-overview

步骤2-准备组件进行翻译。

只需说您的组件看起来像这样：

<span>{{myBooleanValue}}</span>

您可以通过添加I18N标签和选择功能来准备翻译以进行翻译：

<span i18n>{ myBooleanValue, select, true {true} false {false}}</span>

步骤3-通过运行 ng提取-I18N -OUTPUT -PATH src/locale

步骤4提取源文本，以进行翻译 ng extract -i18n - 如果您在步骤1中遵循视频，则应该有一个消息。xlf文件借助您的源文本，并使用目标语言文本的副本。将从源XLF的transunit复制到目标XLF，并在trans单元中的源文本下方添加以下目标行：

<source>{VAR_SELECT, select, true {true} false {false}}</source>
<target>{VAR_SELECT, select, true {verdadero} false {falso}}</target>

这些显示了西班牙语翻译的真/错误。您可以用目标语言添加是/否。

Answer 2

不幸的是，与Date不同，可以轻松地使用JS本地化，必须翻译一个简单的“是”或“否”字符串才能实现这一目标。以下是我要实现这一目标的一些步骤：

1. issal ngx-translate https ：//www.npmjs.com/package/@ngx-translate/core 并遵循其设置指南，并为您想要翻译的所有语言创建翻译资源文件。如果您不喜欢他们的文档，这是一篇很棒的文章，易于遵循指南 https://www.codeandweb.com/babeledit/tutorials/how-to-to-to-to-to-to-treanslate-your-angular-angular-angular-angular-angular-angular-angular-ang--with-ngx-ngx-translate
2. 只是将翻译服务与您的管道一起使用，

    @Pipe({
      name: 'yesNo'
    })
    export class YesNoPipe implements PipeTransform {
    
      transform(value: boolean, ...args: unknown[]): string {
        return value ? 'KEY.YES' : 'KEY.NO';
      }
    
    }
    ...
    {{ my.boolean | yesNo | translate }}

这有点痛苦，但是此设置将无限地扩展到需要本地化/全球化的任何未来工作。