翻译自定义角度管道中的文本 (ngx-translate)

Question

我在我的 Angular 应用程序中使用 ngx-translate 进行翻译。

在自定义管道中，我有一些需要翻译的文本。

管道：

import { Pipe, PipeTransform } from '@angular/core';
import { Something} from '../domain';

@Pipe({
  name: 'someDescription'
})
export class SomeDescriptionPipe implements PipeTransform {

  transform(value: Something, args?: any): string {
    switch (value) {
      case Something.value1: return 'string 001';
      case Something.value2: return 'string 002';
      default: return value;
    }
  }

}

据我所知，自 Angular 6 以来不支持构造函数。 如何翻译管道中的文本？ （经过一番研究，事实并非如此）

解决方案是使用构造函数并导入 TranslateService。

Answer 1

在下面的示例中“editProfile.timeZones.”+timeZone?.key 首先传入时区管道，然后传入 ngx 翻译管道，您可以对自定义管道和 ngx 翻译管道执行相同操作

<option *ngFor="let timeZone of timeZones" [value]="(timeZone?.key)">
                          {{ "editProfile.timeZones."+timeZone?.key | timezone | translate }}
</option>

Answer 2

在 Angular 9 和 ngx-translate/core 12.1.x 中，我可以将 TranslationService 注入 Pipe 并使用它。

为了能够做到这一点，您需要在某处导入 TranslateModule.forRoot({...})，例如我的主要 AppModule 导入中有它。

    import { Pipe, PipeTransform } from '@angular/core';
    import { Something} from '../domain';
    import { TranslateService } from '@ngx-translate/core';
    
    @Pipe({
      name: 'someDescription'
    })
    export class SomeDescriptionPipe implements PipeTransform {

      constructor(private _translateService: TranslateService) {
      }
    
      transform(value: Something, args?: any): string {
          //use translateService.instant('some.translation.key') function here


        switch (value) {
          case Something.value1: return 'string 001';
          case Something.value2: return 'string 002';
          default: return value;
        }
    
      }
    
    }

请注意，您还可以从 ngx-translate 获得一个 translate 管道，正如某人已经提到的那样。