计时器使用服务未被拨打的服务

Question

我已经在组件中创建了一个Angular以用于计时器的服务文件

  import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class TimerUtilService {
    
      initial_module_timer_value = 300;
      second_left:any;
      module_finish_interval;
      time_limit_over:any=false;
    
      constructor() { }
      start_countdown()
      { 
        this.startTimer(this.initial_module_timer_value);
      }
      startTimer(duration) {
        var timer = duration, minutes, seconds;
        var self = this;
        this.module_finish_interval= setInterval(() => { 
          minutes = (timer / 60) | 0;
          seconds = (timer % 60) | 0;
          if(timer>=0)
          {
          minutes = minutes < 10 ? "0" + minutes : minutes;
          seconds = seconds < 10 ? "0" + seconds : seconds;
          this.second_left = minutes + ":" + seconds;
        
          }
     if(--timer < 0)
    {
    console.log('completed');
    }
          },1000);
      }
      end_countdown()
      {  
      clearInterval(this.module_finish_interval);
      }
    }

，我想调用此服务

import { TimerUtilService } from '../../../shared/timer-util.service';

export class TestComponent implements OnInit {
constructor(private route: ActivatedRoute,private elem: ElementRef,private router: Router,private http: HttpClient,private timerService : TimerUtilService) {
    this.timerService.start_countdown();
    console.log(this.timerService.second_left);
}

在控制台中获取无效值。

我想在我的组件中显示计时器，例如05:00分钟，那么该计时器应在调用的组件中每秒减小，该组件被调用，直到剩下的时间为00:00秒。

谢谢

Answer 1

您正在获得null结果，因为second_left变量在调用console.log（this.timerservice.second_left）时仍然不确定。

尝试在服务功能中放置一个console.log，然后查看幕后发生的事情：

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

@Injectable({
  providedIn: 'root'
})
export class TimerUtilService {

  initial_module_timer_value = 300;
  second_left:any;
  module_finish_interval;
  time_limit_over:any=false;

  constructor() { }
  start_countdown()
  { 
    this.startTimer(this.initial_module_timer_value);
  }
  startTimer(duration) {
    var timer = duration, minutes, seconds;
    var self = this;
    this.module_finish_interval= setInterval(() => { 

      //##################
      // Logging timer and seconds at every interval
      //#################
      console.log("Timer: " + timer);
      console.log("Seconds left: " + second_left);        

      minutes = (timer / 60) | 0;
      seconds = (timer % 60) | 0;
      if(timer>=0)
      {
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      this.second_left = minutes + ":" + seconds;
      if(timer==0)
      {
        console.log('completed');
      }  
      }
      },1000);
  }
  end_countdown()
  {  
  clearInterval(this.module_finish_interval);
  }
}

Answer 2

您可能需要考虑将要启动的功能放在ngoninit（）函数中，因此

ngOnInit(): void {
 this.timerService.start_countdown();
}

请尝试使用startTimer（）函数，

var timer = duration, minutes, seconds;
var x = setInterval(() => { 
    minutes = (timer / 60) | 0;
    seconds = (timer % 60) | 0;
    if(timer>=0){
        timer=timer-1
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        var second_left = minutes + ":" + seconds;

        console.log(second_left);

        if(timer==0){
            console.log("cleared");
            clearInterval(x)
        }
    }
},1000)

因为构造函数仅调用一次，您只会有一个00:00秒秒钟的控制台log。

编辑

一种方法是在testomponent.ts本身中使用startTimer（），而不是timerutilservice，如果您想使用服务，则需要可观察的方式 ，但是这种方式可能会引起性能问题，而不是很大的想法持续的反馈。