Javascript 如何使用ngx倒计时启动和停止倒计时

场景：在这里，我正在寻找一个倒计时计时器，在这个计时器中，用户经过几秒钟，然后按下开始或停止按钮 我正在使用ngx倒数计时器

要求：

用户为计时器提供一些自定义秒数（这已经完成）

默认情况下，如何显示“开始”按钮，当用户按下“开始”按钮时，只需显示“停止”按钮

在这里，当给定的秒数结束时，我如何停止计时器？我的意思是，当用户给定60秒时，它应该在这之后停止，并显示警报，用户也可以停止计时器

下面是我的代码

  <countdown [config]="{leftTime: timeData}" (event)="handleEvent($event)"></countdown>
  `
})
export class AppComponent  {
  timeData = "120"
  constructor(){

  }

handleEvent(event){
  console.log(event)
}

`
})
导出类AppComponent{
timeData=“120”
构造函数（）{
}
handleEvent（事件）{
console.log（事件）
}

下面是我的stackblitz url

---

您需要添加

@ViewChild（'cd'，{static:false}）私有倒计时：倒计时组件；

然后添加一些按钮并绑定操作：

模板：

<countdown #cd [config]="{leftTime: timeData}" (event)="handleEvent($event)"> 
</countdown>
<button (click)="pause()">pause</button>
<button (click)="start()">start</button>

例如：

编辑：

将“通知”属性添加到配置：

[config]="{leftTime: timeData, notify: [ 2, 5 ]}"

然后，当计时器达到5和2时，将触发notify事件

handleEvent(event){
    if(event.action === 'notify'){
      console.log('Hi!');
    }
  }

例如：

这可能会对您有所帮助

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <countdown [config]="config" (event)="handleEvent($event)"></countdown>
  <button (click)="start()">START</button>
  <button *ngIf="showStop" (click)="stop()">STOP</button>
  `
})
export class AppComponent  {
  timeData = "60"
  config:any;
  showStop:boolean;
  constructor(){

  }
    public ngOnInit() {
      this.config = {leftTime: this.timeData, demand:true};
  }
start(){
  this.config = {leftTime:this.timeData, demand:false};
  this.showStop=true;
}
stop(){
   this.config = {leftTime:this.timeData, demand:true};
   this.showStop=false;
}
handleEvent(event){
  console.log(event)
}
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
开始
停止
`
})
导出类AppComponent{
timeData=“60”
配置：任意；
showStop：布尔；
构造函数（）{
}
公共ngOnInit（）{
this.config={leftTime:this.timeData，demand:true}；
}
开始（）{
this.config={leftTime:this.timeData，demand:false}；
this.showStop=true；
}
停止（）{
this.config={leftTime:this.timeData，demand:true}；
this.showStop=false；
}
handleEvent（事件）{
console.log（事件）
}
}

ok，但在给定的秒数完成后，我如何显示警报？比如，如果我在20秒后给出20秒，它应该触发警报类型off@Madpop现在试试是的，这里你提到的是2,5，但在真实场景中，当用户按下停止键时，我们必须知道确切的值right@izik暂停倒计时后，如何获取剩余时间？好的但是，在给定的秒数完成后，我如何显示警报？比如，如果我在20秒后给出20秒，它应该会触发警报

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <countdown [config]="config" (event)="handleEvent($event)"></countdown>
  <button (click)="start()">START</button>
  <button *ngIf="showStop" (click)="stop()">STOP</button>
  `
})
export class AppComponent  {
  timeData = "60"
  config:any;
  showStop:boolean;
  constructor(){

  }
    public ngOnInit() {
      this.config = {leftTime: this.timeData, demand:true};
  }
start(){
  this.config = {leftTime:this.timeData, demand:false};
  this.showStop=true;
}
stop(){
   this.config = {leftTime:this.timeData, demand:true};
   this.showStop=false;
}
handleEvent(event){
  console.log(event)
}
}