如何在 Angular 2 中使用自定义管道中的服务答案

【问题标题】：How to use services in custom pipes in angular 2如何在 Angular 2 中使用自定义管道中的服务
【发布时间】：2017-12-07 16:46:24
【问题描述】：

我想在 html 上显示以年为单位的月份。我的过滤器需要几个月作为输入，它应该返回年份。

例如：如果输入 12，它应该返回翻译后的值作为 1 年。如果超过 1 年，则应返回“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>

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

【问题讨论】：

我对这个$translate.instace('YEARS') 有点怀疑，但除此之外，您的代码似乎没有任何问题，您的错误是什么？是您的管道不工作还是您的目标（以年显示月份）尚未实现？
$translate 在 Angular 2 中不存在。我们需要 import import { TranslateService } from '@ngx-translate/core';并使用它。我不知道如何使用：P

标签： angular2-services angular2-pipe

【解决方案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 会立即返回值，还有一些有用的值，例如stream，它会给你一个 observable，即使语言发生变化，它也会继续将值流式传输到你的订阅中。 get 不会。您可以使用更多方法，因此我建议您查看文档并了解最适合您的方法。

【讨论】：