单击同级组件中的按钮时，如何暂停/恢复计时器？

Question

I am new to Angular. How do i send a message between siblings component? For example, one of my component has a timer. The silbling component has a stop button. When this button is clicked, i want to pause the timer.

My component with a timer:

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);
  }



}

My timer html:

{{ time }}

The Parent component html:

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

My other component (silbling)

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

Answer 1

在服务中使用一个主题，然后在组件中对其进行订阅以查看其单击时间。

Answer 2

I'm using EventEmitter and subscribe to it to change the start/stop time. When a sibling component click stop button, it will call the method in service which emit the EventEmitter. The TestComponent will subscribe to this EventEmitter value and stop the time.

I create a demo for you