时间戳

首页 > 解决方案 > 在两个组件中显示相同的时间计数

angular - 在两个组件中显示相同的时间计数

问题描述

我有一个用作计时器的按钮。我创建了一个服务，以便可以同时在多个组件中显示此按钮的操作。

我的问题是我无法在启动时显示两个组件的时间计数。我尝试了几种方法，但没有成功，有人可以帮助我吗？

html

        <div class="btn-group" dropdown>
<button id="button-basic" dropdownToggle aria-controls="dropdown-basic">
    <img *ngIf="taskService.getCurrentState() === 'pause' || taskService.getCurrentState() === undefined" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcW6cJlI-KlS721hkuHDTMydZ_snrkhL9sm9wYHWRhd3FlvF1b&s" width="50" height="50">
    <img *ngIf="taskService.getCurrentState() ==='start'"
    src="https://png.pngtree.com/png-clipart/20190516/original/pngtree-pause-vector-icon-png-image_3791321.jpg" width="50" height="50">
  </button>
<div class="timer">
    <!-- <span>{{(taskService.timerForUsers[data.key.ID].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span> -->
    <!-- <span>{{(taskService.timerForUsers[data.key.ID].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span> -->
</div>

标签： angulartypescript

解决方案

传递datatonavbar组件，以便data[0].ID在组件中可用navbar。

// app.component.html

<app-navbar [data]="data"></app-navbar>

访问，data在navbar组件使用@Input()-组件交互。

// navbar.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Input() data;

// navbar.component.html
<span *ngIf="data.length > 0">{{(taskService.timerForUsers[data[0].ID].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span>

推荐阅读