Angular 10 日期管道 API

在本文中，我们将了解 Angular 10 中的DatePipe是什么以及如何使用它。

DatePipe用于根据区域设置规则格式化日期值。

句法：

{{ value | date }}

方法：

• 创建要使用的 Angular 应用程序。
• 不需要任何导入即可使用 DatePipe。
• 在 app.component.ts 中定义接受日期值的变量。
• 在 app.component.html 中使用上述语法来制作日期元素。
• 使用 ng serve 为 Angular 应用程序服务以查看输出。

参数：

• 格式：它需要一个字符串值。
• 时区：它需要一个字符串值。
• 语言环境：它需要一个字符串值。

示例 1：

app.component.ts

import { Component, OnInit } 
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    today: number = Date.now();
}

app.component.html

Date {{today | date}}
  
     
Time {{today | date:'h:mm a z'}}

输出：

示例 2：

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    today: number = Date.now();
}

app.component.html

Date {{today | date}}
  
     
Time {{today | date:'h:m:s'}}

输出：