javascript - 如何在 Angular 4中的扩展数据管道中设置区域设置？

Question

我有一个从 DataPipe Angular 类扩展的自定义管道。

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

@Pipe({
  name: 'dateTimeFormater'
})
export class DateTimeFormaterPipe extends DatePipe implements PipeTransform {
  transform(value: any): string {
    const currentDay = new Date().getDay();
    const itemDate = new Date(value);
    const elementDay = itemDate.getDay();
    const format = currentDay === elementDay ? DatePipe['_ALIASES'].mediumTime : DatePipe['_ALIASES'].shortDate;
    return super.transform(value, format );
  }
}

我需要根据用户语言(而不是浏览器配置)设置区域设置(全局)值。当用户登录应用程序时，该值是从数据库获取的。例如，我在 app.module 中有这个值。

基类有一个带有区域设置参数的构造函数，但我不知道如何使用区域设置值进行调用。该值可能会有所不同，具体取决于上下文或用户设置。

//common/pipes/ts/date_pipe.ts (angular code)

export declare class DatePipe implements PipeTransform {
  private _locale;
  constructor(_locale: string);
    transform(value: any, pattern?: string): string | null;
}

Answer 1

基于我的 Angular 5 版本中的基类。

export declare class DatePipe implements PipeTransform {
    private locale;
    constructor(locale: string);
    transform(value: any, format?: string, timezone?: string, locale?: string): string | null;
}

您可以使用这种管道格式将区域设置作为构造函数传递到管道。

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

@Pipe({
  name: 'dateTimeFormater'
})
export class DateTimeFormaterPipe extends DatePipe implements PipeTransform {

    constructor(locale: string){
        super(locale);
    }
  transform(value: any,format?:string): string {
    const currentDay = new Date().getDay();
    const itemDate = new Date(value);
    const elementDay = itemDate.getDay();
    const format = currentDay === elementDay ? DatePipe['_ALIASES'].mediumTime : DatePipe['_ALIASES'].shortDate;
    return super.transform(value, format );
  }
}

然后像这样使用它。

new DateTimeFormaterPipe('en-US').transform(date_value, 'yyyy-MM-dd HH:mm:ss')

其中“en-US”是您的区域设置。