Question

我需要在角度模板中显示日期和时间，并保持更新，因此，当时间更改为显示课程时间更改时， 应用程序应外观 ：

这是我的.html模板代码：

<div class="top-right pull-right">
  <button type="button" class="btn xbutton-rectangle" (click)="logOut()">
    <div class="icon-user pull-left">
      <i class="fas fa-user fa-fw"></i>
      <span class="button-text">{{employee.FullName}}</span>
    </div>
    <div class="time-date pull-right">
      <p class="button-time">08:55</p>
      <p class="button-date">22.06.2018</p>
    </div>
  </button>
</div>

我的.ts文件：

@Component({
  selector: 'main-screen',
  templateUrl: './main-screen.component.html',
  styleUrls: ['./main-screen.component.css']
})
export class MainScreenComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
    //.. some methods 
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  logOut() {
    this._globals.isAuthenticated = false;
    this._globals.loggedInUser = null;
    this._globals.token = null;
  }

}

那么如何显示日期和时间？并在系统日期和时间更改时保持更新？

Answer 1

您应为日期分配一个变量，例如每隔0.1秒更新一次

public today = Date.now();

 setInterval(() => {
      this.today = Date.now();
    }, 100);

例如，如果您想要小时和分钟，可以像这样在html中显示它：

{{today | date:'HH:mm' }}

查看https://angular.io/api/common/DatePipe的其他日期格式

Answer 2

您需要做的就是在构造函数上使用setInterval

  date:Date; 
  constructor(){
    setInterval(() => {
      this.date = new Date()
    }, 1000)
  }

然后使用日期管道设置日期和时间的格式

{{date   | date: "mm-dd-yyyy"}}
{{date   | date: "HH:mm:ss"}}

Demo

Answer 3

只需在组件中添加新功能

    @Component({
      selector: 'main-screen',
      templateUrl: './main-screen.component.html',
      styleUrls: ['./main-screen.component.css']
    })
    export class MainScreenComponent implements OnInit {

      constructor() {
      }

      ngOnInit() {
          this.utcTime();
      }

      ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
      }

       utcTime(): void {
        setInterval(function() {
            this.myDate = new Date();
            console.log(this.myDate); // just testing if it is working
        }, 1000);
    }

      logOut() {
        this._globals.isAuthenticated = false;
        this._globals.loggedInUser = null;
        this._globals.token = null;
      }

然后使用角度日期管道随意更改日期格式

Answer 4

对我来说，疯狂的简单是直接在HTML中完成。只需将其添加到您的HTML

<script>document.write(new Date().getFullYear());</script>

Answer 5

因为我喜欢 RxJS，所以我用它做了一个服务，用这个代码创建了一个 ClockService：

import { Injectable } from '@angular/core';
import { interval, Observable, of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ClockService {

  constructor() { }

  getClock() : Observable<Date> {
    return interval(1000).pipe(
      mergeMap(() => of(new Date()))
    )
  }
}

并在您的 component.ts 文件中注入您的服务，如下所示：

export class AppComponent implements OnInit {

  clock: Observable<Date>;

  constructor(private clockService: ClockService) { }

  ngOnInit(): void {
    this.clock = this.clockService.getClock();
  }
  
}

最后，像这样在您的 html 中使用它，您可以根据需要从 Angular DatePipe Documentation 中调整日期过滤器：

{{ clock | async | date:'HH:mm:ss'}}

如何在Angular模板中显示日期和时间并保持更新？

5 个答案: