Angular 15直接调用DatePipe类时如何设置时区偏移'-1200'

问题背景 #

在Angular 15项目中，通过Core Team推荐的注入令牌方式覆盖了默认时区，HTML插值使用DatePipe时该设置正常生效，但在组件侧通过TypeScript直接实例化DatePipe处理日期时，注入令牌的时区设置不生效。示例代码如下：

import { Component, OnInit} from "@angular/core";
import { DatePipe } from "@angular/common";

export class Angular15Component implements OnInit {
    dateToDisplay: string;

    ngOnInit(): void {
        this.dateToDisplay = new DatePipe("en-us").transform("2023-01-27T22:29:36.86826Z", "dd MMM yyyy, hh:mm a");
        console.log("date", date); // 输出27 Jan 2023, 02:29 PM，未应用预期的时区覆盖
    }
}

需实现为该场景下的DatePipe设置时区偏移'-1200'，且不使用DateFNS、MomentJS等第三方库。

解决方案 #

方案1：直接指定transform方法的时区参数

你自行发现的方式完全可行，DatePipe的transform方法第三个参数支持传入±HHmm格式的时区偏移值，直接修改代码即可生效：

this.dateToDisplay = new DatePipe("en-us").transform(
  "2023-01-27T22:29:36.86826Z", 
  "dd MMM yyyy, hh:mm a", 
  "-1200"
);

方案2：依赖注入复用全局时区配置

如果希望复用全局注入令牌配置的时区，避免重复设置，推荐通过Angular依赖注入系统获取DatePipe实例，而非手动new。这样实例会自动读取全局配置的时区，保证HTML与TS侧行为一致：

1. 在组件构造函数中注入DatePipe：

import { Component, OnInit} from "@angular/core";
import { DatePipe } from "@angular/common";

export class Angular15Component implements OnInit {
    dateToDisplay: string;

    constructor(private datePipe: DatePipe) {}

    ngOnInit(): void {
        this.dateToDisplay = this.datePipe.transform(
          "2023-01-27T22:29:36.86826Z", 
          "dd MMM yyyy, hh:mm a"
        );
        console.log("date", this.dateToDisplay); // 自动应用全局时区配置
    }
}

2. 确保全局时区注入令牌配置正确（以app.module.ts为例）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DATE_PIPE_DEFAULT_OPTIONS, LOCALE_ID } from '@angular/common';

@NgModule({
  imports: [BrowserModule],
  providers: [
    { provide: LOCALE_ID, useValue: 'en-us' },
    { 
      provide: DATE_PIPE_DEFAULT_OPTIONS, 
      useValue: { 
        timezone: '-1200' // 全局默认时区
      } 
    }
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者markreyes