Question

我正在尝试向我的应用添加倒数计时器，并为此目的找到了一个ngx-countdown组件，但是未触发（结束）事件。我在做什么错了？

我的组件

import { Component, OnInit, ViewChild } from '@angular/core';
import { Question } from '../../models/Question'
import { AnswerService } from 'src/app/services/answer.service';
import { ActivatedRoute } from '@angular/router';
import { CountdownComponent } from 'ngx-countdown';

@Component({
  selector: 'app-answer-sheet',
  templateUrl: './answer-sheet.component.html',
  styleUrls: ['./answer-sheet.component.css']
})
export class AnswerSheetComponent implements OnInit {

  questions: Question[];
  @ViewChild('countdown', { static: false }) private countdown: CountdownComponent;

  constructor(private route: ActivatedRoute, private answerService: AnswerService) { }

  ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id')
    this.answerService.getQuestions(id).subscribe(questions => this.questions = questions);
  }

  ngAfterViewInit () {
    this.countdown.pause();
    this.countdown.resume();
  }

  answerQuestion(question: Question) {
    var q = this.questions.find(q => q.nr === question.nr)
    q.userAnswer = question.userAnswer
  }

  handleEvent($event) {
    if ($event.left === 0) {
      alert("Time's up, mate")
    }
  }

  onTimerFinished() {
    alert("Time's up, mate")
  }

和标记：

<p class="countdown">
  <countdown #countdown [config]="{leftTime: 5}" (finished)="onTimerFinished()" >$!m!:$!s!</countdown>
</p>
<form (ngSubmit)="onAnswerSubmit()">
  <app-question 
    *ngFor="let question of questions"
    [question]="question"
    (answerQuestion)="answerQuestion($event)"
    >
  </app-question>
  <input mat-raised-button type="submit" value="Submit">
</form>

我正在使用Angular版本8。

Answer 1

尝试html：

  <countdown #countdown [config]="{leftTime: 5} (event)="onTimerFinished($event)" >$!m!:$!s!</countdown>

在ts中：

 onTimerFinished(e:Event){
   if (e["action"] == "done"){
      //your code here
    }
  }

Answer 2

在搜索他们的官方文档之前，我遇到了同样的问题在官方网站上和这里 https://github.com/cipchk/ngx-countdown 他们提到了类型及其已随模块安装的
它为我解决了

  onTimerFinished(e: CountdownEvent) {
    if (e.action == 'done') {
 
    }
  }

ngx-countdown（完成）事件未触发

2 个答案: