Javascript 用momentjs显示当前时间

我试图创建一个动态显示当前时间的时钟组件

问题：加载时时间按预期显示（HH:mm A），但时钟根本没有变化

clock.component.ts:

import {
    ChangeDetectionStrategy,
    Component,
    OnInit
} from "@angular/core";
import { Observable, interval } from "rxjs";
import { map, distinctUntilChanged } from "rxjs/operators";
import * as moment from "moment";

@Component({
    selector: "app-clock",
    templateUrl: "./clock.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClockComponent implements OnInit {

    pageLoaded: moment.Moment;
    time: Observable<string>;

    constructor() {}

    ngOnInit() {
        this.pageLoaded = moment(new Date());

        this.time = interval(1000).pipe(
            map(() => this.pageLoaded.format("HH:mm A")),
            distinctUntilChanged()
        );
    }
}

<div>{{ time | async }}</div>

导入{
改变检测策略，
组成部分，
奥尼特
}从“@角度/核心”；
从“rxjs”导入{Observable，interval}；
从“rxjs/operators”导入{map，distinctUntilChanged}；
从“时刻”导入*作为时刻；
@组成部分({
选择器：“应用程序时钟”，
templateUrl:“./clock.component.html”，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类ClockComponent实现OnInit{
页面加载：时刻，时刻；
时间：可观察；
构造函数（）{}
恩戈尼尼特（）{
this.pageLoaded=时刻（新日期（））；
this.time=间隔（1000）。管道(
map（（）=>this.pageLoaded.format（“HH:mma”），
distinctUntilChanged（）
);
}
}

clock.component.html:

import {
    ChangeDetectionStrategy,
    Component,
    OnInit
} from "@angular/core";
import { Observable, interval } from "rxjs";
import { map, distinctUntilChanged } from "rxjs/operators";
import * as moment from "moment";

@Component({
    selector: "app-clock",
    templateUrl: "./clock.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClockComponent implements OnInit {

    pageLoaded: moment.Moment;
    time: Observable<string>;

    constructor() {}

    ngOnInit() {
        this.pageLoaded = moment(new Date());

        this.time = interval(1000).pipe(
            map(() => this.pageLoaded.format("HH:mm A")),
            distinctUntilChanged()
        );
    }
}

<div>{{ time | async }}</div>

{{time | async}

首先，如果我知道你在哪里，我将使用

@types/moment

使我的生活更轻松（可选）

那么，为什么“时钟一点也不改变”

因为一旦页面加载，您就初始化了时钟的值，并且该值基本上不会更新。时间保存的是初始化的值，而不是更新的值，因此，以下内容与您的

组件

相同，但有一点版本

import {
    ChangeDetectionStrategy,
    Component,
    OnInit
} from "@angular/core";
import { Observable, interval } from "rxjs";
import { map, distinctUntilChanged } from "rxjs/operators";
import moment, { Moment } from "moment"; // using @types/moment

@Component({
    selector: "app-clock",
    templateUrl: "./clock.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClockComponent implements OnInit {

    pageLoaded: Moment;
    time: Observable<string>;

    constructor() {}

    ngOnInit() {
    this.time = interval(1000*60).pipe( // why you need 1s interval with HH:mm time format simply update it every minute not every second.
      map(() => {
        this.pageLoaded = moment(new Date()); // you need the value of now not the value of the initialized time.
        return this.pageLoaded.format("HH:mm A");
      })
    );
  }
}

导入{
改变检测策略，
组成部分，
奥尼特
}从“@角度/核心”；
从“rxjs”导入{Observable，interval}；
从“rxjs/operators”导入{map，distinctUntilChanged}；
导入力矩，{moment}来自“力矩”；//使用@types/moment
@组成部分({
选择器：“应用程序时钟”，
templateUrl:“./clock.component.html”，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类ClockComponent实现OnInit{
页面加载：时刻；
时间：可观察；
构造函数（）{}
恩戈尼尼特（）{
this.time=interval（1000*60）.pipe（//为什么需要1s interval和HH:mm时间格式只需每分钟更新一次，而不是每秒钟更新一次。
地图（（）=>{
this.pageLoaded=moment（new Date（））；//您需要的是now的值，而不是初始化时间的值。
返回此.pageLoaded.format（“HH:mma”）；
})
);
}
}

你的观点就是这样

---

这里有一个stackblitz示例，请自己检查它

首先，如果我在您的位置，我将使用

@types/moment

使我的生活更轻松（可选）

那么，为什么“时钟一点也不改变”

因为一旦页面加载，您就初始化了时钟的值，并且该值基本上不会更新。时间保存的是初始化的值，而不是更新的值，因此，以下内容与您的

组件

相同，但有一点版本

import {
    ChangeDetectionStrategy,
    Component,
    OnInit
} from "@angular/core";
import { Observable, interval } from "rxjs";
import { map, distinctUntilChanged } from "rxjs/operators";
import moment, { Moment } from "moment"; // using @types/moment

@Component({
    selector: "app-clock",
    templateUrl: "./clock.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClockComponent implements OnInit {

    pageLoaded: Moment;
    time: Observable<string>;

    constructor() {}

    ngOnInit() {
    this.time = interval(1000*60).pipe( // why you need 1s interval with HH:mm time format simply update it every minute not every second.
      map(() => {
        this.pageLoaded = moment(new Date()); // you need the value of now not the value of the initialized time.
        return this.pageLoaded.format("HH:mm A");
      })
    );
  }
}

导入{
改变检测策略，
组成部分，
奥尼特
}从“@角度/核心”；
从“rxjs”导入{Observable，interval}；
从“rxjs/operators”导入{map，distinctUntilChanged}；
导入力矩，{moment}来自“力矩”；//使用@types/moment
@组成部分({
选择器：“应用程序时钟”，
templateUrl:“./clock.component.html”，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类ClockComponent实现OnInit{
页面加载：时刻；
时间：可观察；
构造函数（）{}
恩戈尼尼特（）{
this.time=interval（1000*60）.pipe（//为什么需要1s interval和HH:mm时间格式只需每分钟更新一次，而不是每秒钟更新一次。
地图（（）=>{
this.pageLoaded=moment（new Date（））；//您需要的是now的值，而不是初始化时间的值。
返回此.pageLoaded.format（“HH:mma”）；
})
);
}
}

你的观点就是这样

---

这里有一个stackblitz示例，请自己检查它

时钟不会改变，因为您每次都重新绘制相同的时刻实例。如果您想要一个新的值，您应该创建一个新的矩实例（同样，您不需要用日期来调用它，在没有任何参数的情况下调用它会给出当前时间）。正如你可能已经注意到的，时刻主页上的时钟也是动态的，因此你可以了解他们是如何做到的。时钟不会改变，因为你每次都重新绘制相同的时刻实例。如果您想要一个新的值，您应该创建一个新的矩实例（同样，您不需要用日期来调用它，在没有任何参数的情况下调用它会给出当前时间）。正如你可能已经注意到的，即时主页上的时钟也是动态的，因此你可以了解他们是如何做到的。做到了，谢谢你的帮助！我似乎无法以适当的方式导入力矩，当我按照您所描述的方式导入力矩时，它会在初始力矩指针下加下划线。当我将它与“*”一起使用时，它是有效的。要按照我描述的方式导入矩，您必须首先安装

@types/moment

，运行

npm I-D@types/moment

。安装时我得到以下输出：*npm WARN deprecated@types/moment@2.13.0：这是矩（）的存根类型定义。Moment提供了自己的类型定义，因此您不需要安装@types/Moment**正如消息所说，他们有自己的类型定义内置，这样你就不必再安装外部软件包了。做到了，谢谢你的帮助！我似乎无法以适当的方式导入力矩，当我按照您所描述的方式导入力矩时，它会在初始力矩指针下加下划线。当我将它与“*”一起使用时，它是有效的。要按照我描述的方式导入矩，您必须首先安装

@types/moment

，运行

npm I-D@types/moment

。安装时我得到以下输出：*npm WARN deprecated@types/moment@2.13.0：这是矩（）的存根类型定义。Moment提供了自己的类型定义，因此您不需要安装@types/Moment**正如消息所说，它们内置了自己的类型定义，因此您不会