Transloco地区。如何添加自定义日期筛选器？

Question

我正在尝试扩展日期筛选器、transloco ，默认情况下，它与其他一些满足我们客户需求的工具一起提供。然而，文档并没有提供有关这方面的示例或良好的解释。你们中有人成功地将自定义过滤器添加到transloco语言环境库中吗？

我发现东西的唯一地方就在这里，帮不上什么忙。它没有说明我应该在哪里调用这些转换器类：https://ngneat.github.io/transloco/docs/plugins/locale/

​

​

我很感激你们的时间，伙计们。任何帮助都是非常欢迎的。

Answer 1

最终得到了一些有用的东西，尽管通过使用角度管道本身。我不知道其他人是否会觉得这有用，但这是我的两分钱：

背景:最初的想法是能够创建一个定制的日期管道，这样我们就可以提供特定的格式。经过调查，我发现没有一个跨地区服务足以实现我的目标。尽管它们允许您指定日期格式，但您必须坚持它们提供的一系列选项。(请参阅LOCALE_DATE_FORMATS对象)最初的想法：

 import {TranslocoLocaleService} from "@ngneat/transloco-locale"; 

@Pipe({name: "culturePipe"}) 
export class CustomDatePipe implements PipeTransform { 

    public LOCALE_DATE_FORMATS: any = { 
        "fullDate" : {dateStyle: "medium", timeStyle: "medium"}, 
        "full": {dateStyle: "full", timeStyle: "full"} 
      }; 
    constructor(private _localeService: TranslocoLocaleService) { 
            this.locale = _localeService.getLocale();
         
          } 
    
    public transform(value: any, format?: string, timezone?: string, locale?: string): string | null { 
        if (value) { 
          return this._localeService.localizeDate(value, this.locale, this.LOCALE_DATE_FORMATS[format]); 
        } 
        return null;      
      } 

解决方案:我创建了一个自定义日期管道，如下所示：

import {Pipe, PipeTransform} from "@angular/core"; 
import {TranslocoLocaleService} from "@ngneat/transloco-locale"; 
import {DatePipe} from "@angular/common"; 
import {TranslocoService} from "@ngneat/transloco"; 
import {CultureService} from "@/services/shared-candidates/culture.service"; 
 
@Pipe({name: "cultureDatePipe"}) 
export class CultureDatePipe implements PipeTransform {     
 
 
  private LOCALE_DATE_FORMATS_ES_ES: any = { 
    ....
    "longDate": "d 'de' MMMM 'de' y", 
    ...

  }; 
 
  private LOCALE_DATE_FORMATS_EN_US: any = { 
   ...
    "longDate": "MMMM d, y", 
    ...
  }; 
  private readonly localeDatesFormats: any; 
  private datePipe: DatePipe; 
  constructor(private _localeService: TranslocoLocaleService, 
              private _translationService: TranslocoService) { 
 
    let locale = this._localeService.getLocale(); 
    switch (locale) {           
      case CultureService.SPANISH_LOCALE: 
        this.localeDatesFormats = this.LOCALE_DATE_FORMATS_ES_ES; 
        break; 
      default: 
        this.localeDatesFormats = this.LOCALE_DATE_FORMATS_EN_US; 
    } 
    this.datePipe = new DatePipe(locale); 
  } 
 
  public transform(value: any, format?: string, timezone?: string, locale?: string): string | null { 
    if (value) { 
      return this.datePipe.transform(value, this.localeDatesFormats[format], undefined, this._translationService.getActiveLang()); 
    } 
  } 
} 

用法：

程序化

constructor(...
            private _dateTransform: CultureDatePipe) {
  }


...
 let date =  this._dateTransform.transform(dueDateISO, "longDate");
...

直列

 <div class="date-line">{{params.date | culturePipe : "longDate" }}</div>