角度布尔管道是/否本地化

Question

我需要一种方便的方法来让我的是-否管道像日期管道一样本地化

{{ my.date | date: 'short' : 'UTC' : 'de-DE' }}

类似的东西

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

而不是返回

value ? "Yes" : "No";

我需要一些魔法：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 步 - 按照 Angular 文档中概述的步骤在您的应用程序中设置国际化。这里有一个很好的教学视频：https://angular.io/guide/i18n-overview

第 2 步 - 准备要翻译的组件。

只要说你有一个看起来像这样的组件：

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

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

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

第 3 步 - 通过运行 ng extract-i18n --output-path src/locale

提取源文本进行翻译

第 4 步 - 如果您按照第 1 步中的视频进行操作，您应该有一个包含源文本的 messages.xlf 文件，以及包含目标语言文本的副本。将 transunit 从源 xlf 复制到目标 xlf 并在 trans 单元中的源文本下方添加以下目标行：

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

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

Answer 2

不幸的是，与可以使用 JS 轻松本地化的

Date

不同，必须翻译简单的“是”或“否”字符串才能实现此目的。以下是我将采取的一些步骤来实现这一目标：

1. 安装 ngx-translate https://www.npmjs.com/package/@ngx-translate/core 并按照他们的设置指南进行操作，并为要翻译的所有语言创建翻译资源文件。如果您不喜欢他们的文档，这里有一篇很棒的文章，其中包含易于遵循的指南https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-翻译一下
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 }}

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