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

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>

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

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