Angular 2 setinterval() 继续在其他组件上运行

typescript

# 在Angular 2中使用setInterval()在其他组件上运行

Angular是一个流行的前端框架，它提供了丰富的功能和工具，以便开发者构建动态且高效的Web应用程序。在Angular 2及以上版本中，开发者经常需要在组件之间共享数据或执行某些操作。本文将介绍如何使用setInterval()函数在一个组件中执行任务，并将其结果传递给另一个组件，以实现在其他组件上运行setInterval()。

## 使用setInterval()在Angular组件中执行任务

首先，让我们了解如何在Angular组件中使用setInterval()函数执行定时任务。假设我们有一个名为TimerComponent的组件，它的目标是每秒更新计时器的值，并将更新后的值传递给另一个组件。

typescript
// timer.component.ts
import { Component, Output, EventEmitter, OnDestroy } from '@angular/core';
@Component({
  selector: 'app-timer',
  template: '
Timer: {{ timerValue }}
',
})
export class TimerComponent implements OnDestroy {
  @Output() timerUpdate = new EventEmitter<number>();
  private intervalId: any;
  public timerValue = 0;
  constructor() {
    this.intervalId = setInterval(() => {
      this.timerValue++;
      this.timerUpdate.emit(this.timerValue);
    }, 1000);
  }
  ngOnDestroy() {
    clearInterval(this.intervalId);
  }
}

在上述代码中，TimerComponent组件使用setInterval()在每秒更新计时器的值，并通过timerUpdate事件将更新后的值发射出去。此组件还在销毁时清除了定时器，以防止内存泄漏。

## 在另一个组件中接收定时器更新

现在，让我们创建一个名为ReceiverComponent的组件，它将接收TimerComponent组件发射的更新，并显示在页面上。

typescript
// receiver.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-receiver',
  template: '
<img src="https://img.izhida.com/topic/c566ca59602c7c5c0d3fe5e18ade447d.jpg" alt="服务器"><br>服务器
Received Timer Value: {{ receivedValue }}
',
})
export class ReceiverComponent {
  public receivedValue = 0;
  updateTimer(value: number) {
    this.receivedValue = value;
  }
}

在上述代码中，ReceiverComponent组件通过updateTimer方法接收TimerComponent组件发射的值，并将其显示在页面上。

## 在父组件中组合两个组件

最后，我们将这两个组件组合在一个父组件中，以实现在ReceiverComponent上运行setInterval()。

typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <app-timer (timerUpdate)="receiver.updateTimer($event)"></app-timer>
    <app-receiver #receiver></app-receiver>
  </code>,
})
export class AppComponent {}

在上述代码中，父组件AppComponent通过模板语法将TimerComponent和ReceiverComponent组件组合在一起，并通过事件绑定将timerUpdate事件连接到ReceiverComponent的updateTimer方法上。

注意： 为了确保在组件销毁时清除定时器，我们在TimerComponent中实现了OnDestroy接口，并在ngOnDestroy生命周期钩子中调用了clearInterval。

这样，我们就成功地实现了在Angular 2中使用setInterval()在一个组件中执行任务，并将结果传递给另一个组件的目标。这种模式可以在实际应用中用于各种场景，例如定时轮询服务器数据或更新UI。