如何在 angular 2 中的自定义管道中使用服务

Question

我想在 html 上以年为单位显示月份。我的过滤器将月数作为输入，它应该 return 年。

例如：输入12，则return翻译成1年。如果超过 1 年，则应 return '2 年'。

我的管道包含：

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

@Pipe({name : 'displayMonthsInYears '})
export class DisplayMonthsInYears implements PipeTransform{
    transform(noOfMonths : number) : any {
         if(noOfMonths > 12){
            return (noOfMonths / 12 + $translate.instace('YEARS'));
         }
         return (noOfMonths / 12 + $translate.instace('YEAR'));
    }
}

和html是：

 <div class="text-left">
     {{ contractDuration | displayMonthsInYears }}
 </div>

我不知道如何做到这一点。请帮忙。

Answer 1

使用

安装翻译库及其 http-loader

npm install @ngx-translate/core @ngx-translate/http-loader --save

按照 @ngx-translate 文档 中的设置指南进行操作。然后导入服务：

import {TranslateService} from '@ngx-translate/core';

将它注入你的管道并像这样使用它：

@Pipe({name : 'displayMonthsInYears '})

export class DisplayMonthsInYears implements PipeTransform{

  constructor(private translate: TranslateService) {}

  transform(noOfMonths : number) : any {

     if (noOfMonths > 12) {
        return (noOfMonths / 12 + this.translate.instant('YEARS'));
     }

     return (noOfMonths / 12 + this.translate.instant('YEAR'));
  }
}

instant 会立即 return 值，还有一些有用的值，例如 stream，它会给你一个可观察的值，即使在语言变化。 get 不会。您可以使用更多方法，所以我建议您查看文档并了解最适合您的方法。

如何在 angular 2 中的自定义管道中使用服务

How to use services in custom pipes in angular 2

angular2-services

angular2-pipe