如何在 Angular 17 中使用 Moment.js - 完整指南

Moment.js 是一个流行的 JavaScript 中处理日期和时间的库。在本指南中，您将通过示例和技巧了解如何在 Angular 17 项目中使用 Moment.js。

Angular 17 安装 Moment JS 的步骤

• 第 1 步： 创建 Angular 17 项目
• 第 2 步：安装 Moment JS
• 第 3 步：在组件 ts 文件中添加 Moment
• 第 4 步：使用新组件
• 运行角度应用程序

所以让我们按照这里的步骤操作：

第 1 步：创建 Angular 17 项目

您可以使用以下命令轻松创建角度应用程序：

ng new my-new-app

第2步：安装Moment JS

您必须运行以下命令才能在 Angular 中安装 moment js npm 包。

npm install moment --save

步骤 3：在组件 ts 文件中添加 Moment

让我们对组件文件使用以下代码。

所以，让我们更新如下：

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import moment from 'moment';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firstApp';
  todayDate = '';
      
  constructor() {
    this.test();
  } 
  
  test() {
      const date = moment();
      this.todayDate = date.format('M/D/YYYY');
  
      console.log(this.todayDate);
  }
}

第 4 步：更新组件 HTML 文件

让我们对组件文件使用以下代码。

所以，让我们更新如下：

src/app/app.component.html

<h1>How to use Moment.js in Angular 17 - ItSolutionStuff.Com</h1>
       
<strong>Today Date: {{ todayDate }}</strong>

运行角度应用程序：

所有必需的步骤都已完成，现在您必须输入以下命令并按 Enter 运行 Angular 应用程序：

ng serve

现在，转到您的 Web 浏览器，输入给定的 URL 并查看应用程序输出：

http://localhost:4200

输出：

#angular