主页 / coding / 问题 / 77600560
Accepted
LeO
Asked: 2023-12-04 23:16:19 +0800 CST

具有区域设置使用的 Angular DatePipe

  • 772

我想根据设置/使用的区域设置以 HTML 形式显示日期。出于显示目的，我想用英语或德语显示它 - 这取决于用户的决定。这意味着用户选择区域设置“de”或“en”。

显示日期的默认方式是

 <span>{{ data.selDate | date: "mediumDate" }}</span>

根据我拥有的文档{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}。但这段代码不起作用

 <span>{{ data.selDate | date: "mediumDate" :'':"de-DE" }}</span>
 <span>{{ data.selDate | date: "mediumDate" :undefined:"de-DE" }}</span>

如何在 DatePipe 中指定它？

angular

3 个回答

  1. 默认情况下，Angular 仅具有 en-US 语言环境的语言环境信息。任何其他区域设置都需要导入到您的应用程序中。

    例如，在您的应用程序模块文件中使用德语。

    import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDE);

    如果您有更多语言环境，您可能需要研究按需动态加载所需的语言环境。

    • 2
  2. Best Answer

    您需要导入额外的语言环境

    你可以试试：

    组件.html

    <button (click)="switch('en-US')">Eng</button>
<button (click)="switch('de-DE')">Deu</button>

<span>{{ data.selDate | date: 'mediumDate':'': current }}</span>

    应用程序模块.ts

    import { registerLocaleData } from '@angular/common';
import localeEn from '@angular/common/locales/en';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe);
registerLocaleData(localeEn);

    组件.ts

    current: string = 'de-De';

switch(new: string): void {
  this.current = new;
}

    注意：确保selDate日期有效

    堆栈闪电战

    • 2

  3. 下面是 stackblitz 的示例，不是我创建的。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [DatePipe]
})
export class AppComponent implements OnInit {
  date = new Date();

  constructor(public datePipe: DatePipe) { }

  ngOnInit() {
    console.log(this.datePipe.transform(this.date, 'mediumDate', '', 'ar-AE'))
  }
}

    html

    <p>{{ date | date:'longDate':'':'ar-AE' }}</p>

    堆栈闪电战

    • 0

相关问题