Angular5计时结束触发事件：子组件计数器清零通知父组件失败

嘿，我来帮你搞定这个子组件通知父组件的问题！在Angular里，子组件要向父组件传递状态变化（比如计数器清零），最靠谱的方式就是用**@Output()事件发射器**，看起来你应该是没用上这个机制，所以父组件才收不到通知。我给你一步步拆解修改方案：

第一步：在子组件中添加输出事件 #

首先得在你的TimerComponent里导入必要的模块，并定义一个输出事件：

1. 先把Output和EventEmitter加到导入语句里：

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

2. 在组件类内部，定义一个输出属性，用来发射清零事件：

@Output() timerReset = new EventEmitter<void>();

3. 找到你计数器清零的逻辑（比如当duration减到0的时候），在那个位置触发事件：

// 假设这是你的计时结束/清零逻辑
if (this.duration <= 0) {
  // 其他清零相关操作...
  // 通知父组件计数器已清零
  this.timerReset.emit();
}

修改后的完整子组件代码片段大概是这样：

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

@Component({
  selector: 'timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.scss']
})
export class TimerComponent implements OnInit {
  private timeString : string;
  private duration = 5;
  private seconds = "--";
  private minutes = "--";
  // 定义输出事件，用来通知父组件清零动作
  @Output() timerReset = new EventEmitter<void>();

  ngOnInit(): void {
    this.startTimer();
  }

  startTimer() {
    const timerInterval = setInterval(() => {
      this.duration--;
      // 这里写你的时分秒格式化逻辑...
      
      if (this.duration <= 0) {
        clearInterval(timerInterval);
        // 计数器清零时，发射事件通知父组件
        this.timerReset.emit();
        // 重置显示的时分秒（比如回到初始状态）
        this.seconds = "--";
        this.minutes = "--";
      }
    }, 1000);
  }
}

第二步：在父组件中监听这个事件 #

接下来，你需要在父组件的模板里绑定子组件的timerReset事件，然后在父组件类里处理这个事件：

1. 父组件模板中使用子组件时，添加事件绑定：

<timer (timerReset)="onTimerReset()"></timer>

2. 在父组件的类里定义处理方法：

// 父组件的组件类
export class ParentComponent {
  // 处理子组件的清零通知
  onTimerReset() {
    console.log("收到子组件的清零通知啦！");
    // 这里写你需要执行的父组件逻辑，比如弹窗提示、重置其他状态等
  }
}

为什么这个方法管用？ #

@Output()是Angular专门设计的父子组件通信机制，子组件通过EventEmitter向外发射事件，父组件通过绑定事件来监听并响应。这种方式很适合子组件向父组件传递动作通知（比如这里的计数器清零），完全符合Angular的组件设计理念。

如果你之前尝试失败，大概率是这几个原因：

• 忘记导入Output和EventEmitter
• 没有在清零的正确时机调用emit()方法
• 父组件没有正确绑定事件

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