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

Question

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

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

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>

Answer 1

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

// app.component.html

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

使用data-navbar访问@Input()组件中的Component Interaction。

// 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>

Answer 2

您可以在userId变量中设置您的ID更改

userId:string="1";

并在navbar.component.html]中添加计时器

<span>{{(taskService.timerForUsers[userId].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span>