單擊同級組件中的按鈕時，如何暫停/恢復計時器？

Question

我是Angular的新手。 我如何在兄弟姐妹組件之間發送消息？ 例如，我的組件之一有一個計時器。 兄弟組件具有一個停止按鈕。 單擊此按鈕時，我想暫停計時器。

我的組件帶有計時器：

import { Component, OnInit } from '@angular/core';

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

  public this.time: number = 0;
  public uiTimerId;

  constructor() { }

  private timer(): void {
    ++this.time;
  }

  ngOnInit() {
    this.start = new Date().getTime();

    this.uiTimerId = window.setInterval(this.updateTimer.bind(this), 1000);
  }



}

我的計時器html：

{{ time }}

父組件html：

<app-header></app-header>
<app-test></app-test>

我的其他組件（銀）

<nav>
  <button>Pause Timer here</button>
</nav>

Answer 1

在服務中使用一個主題，然后在組件中對其進行訂閱以查看其單擊時間。

Answer 2

我正在使用EventEmitter並訂閱它來更改開始/停止時間。 當同級組件單擊停止按鈕時，它將調用服務中的方法，該方法將發出EventEmitter。 TestComponent將訂閱此EventEmitter值並停止時間。

我為您制作一個演示