如何解决Transloco语言环境如何添加自定义日期过滤器?
我尝试扩展日期过滤器 transloco区域设置 默认情况下提供一些满足我们客户要求的日期过滤器。但是,文档没有为此提供示例或良好的解释。 你们有没有人设法将自定义过滤器添加到transloco语言环境库?
我唯一找到东西的地方在这里,并没有多大帮助。它没有说我应该在哪里调用这些转换器类: https://ngneat.github.io/transloco/docs/plugins/locale/
谢谢您的宝贵时间,伙计们。任何帮助将非常欢迎。
解决方法
尽管通过使用角管本身,
终于有了一些工作。 我不知道其他人是否会觉得有用,但这是我的两分钱。
背景: 最初的想法是能够创建自定义日期管道,以便我们提供特定的格式。经过调查,我发现没有任何本地语言服务不足以实现我的目标。尽管它们允许您指定日期格式,但您必须坚持使用它们提供的大量选项。 (请参见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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。