Angular中如何向复用的倒计时子组件传递新数据

嘿，这个场景我太熟悉了！其实在Angular里给同一个子组件更新输入值，核心就是利用**输入属性（@Input）**的响应式特性，再配合事件绑定就能轻松搞定。我给你一步步拆解具体实现：

1. 子组件配置：接收时长+触发结束事件 #

首先得让子组件能接收父组件传来的时长，并且在倒计时结束时通知父组件。我们用@Input定义接收时长的属性，@Output定义结束事件：

// timer.component.ts
import { Component, Input, Output, EventEmitter, SimpleChanges, OnChanges } from '@angular/core';

@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html'
})
export class TimerComponent implements OnChanges {
  @Input() duration: number; // 接收父组件的倒计时时长
  @Output() countdownEnd = new EventEmitter<void>(); // 倒计时结束时触发的事件

  private timerInterval: any;

  // 监听输入属性变化
  ngOnChanges(changes: SimpleChanges) {
    // 当duration有新值时，重启倒计时
    if (changes['duration'] && changes['duration'].currentValue !== undefined) {
      this.restartCountdown(changes['duration'].currentValue);
    }
  }

  private restartCountdown(newDuration: number) {
    // 先清除旧定时器，避免多个定时器冲突
    if (this.timerInterval) {
      clearInterval(this.timerInterval);
    }

    let remaining = newDuration;
    this.timerInterval = setInterval(() => {
      remaining--;
      if (remaining <= 0) {
        clearInterval(this.timerInterval);
        this.countdownEnd.emit(); // 通知父组件倒计时结束
      }
    }, 1000);
  }
}

这里用ngOnChanges钩子监听duration的变化，每次有新值就重启倒计时——这是关键，确保父组件传新值时子组件能响应。

2. 父组件：控制时长+接收结束事件 #

父组件只需要维护一个控制时长的变量，在子组件触发结束事件时更新这个变量就行，Angular会自动把新值同步给子组件的@Input：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  currentTimerDuration: number = 60; // 初始时长，比如60秒

  handleCountdownEnd() {
    // 倒计时结束后，设置新的时长，比如改成30秒
    this.currentTimerDuration = 30;
    // 直接赋值就行，Angular会自动把新值传给子组件
  }
}

对应的父组件HTML：

<!-- parent.component.html -->
<app-timer 
  [duration]="currentTimerDuration" 
  (countdownEnd)="handleCountdownEnd()"
></app-timer>

可选：用setter监听输入值（更简洁的写法） #

如果你觉得ngOnChanges有点繁琐，也可以给@Input加个setter，直接监听值的变化：

// timer.component.ts 里的@Input替换成这个
private _duration: number;
@Input() set duration(value: number) {
  if (value !== undefined) {
    this._duration = value;
    this.restartCountdown(value);
  }
}
get duration(): number {
  return this._duration;
}

这种写法更直观，不需要实现OnChanges接口，看你个人习惯选择就行。

重要提醒 #

不管用哪种方式，一定要在启动新倒计时前清除旧的定时器，不然会出现多个定时器同时运行的情况，导致倒计时速度变快或者逻辑混乱。

内容的提问来源于stack exchange，提问作者GokuLess