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值并停止时间。

我为你创建了一个demo

当单击兄弟组件的按钮时，如何暂停/恢复计时器？

2 个答案: