Я пытаюсь добавить таймер обратного отсчета в мое приложение и обнаружил для этой цели компонент 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.