Angular 2 调用 setInterval() undefined 服务形成依赖注入

typescript

使用Angular 2进行开发时，我们经常会遇到需要在组件中使用定时器的情况。在Angular 2中，我们可以使用setInterval()函数来实现定时执行一段代码的功能。然而，如果我们在组件中直接调用setInterval()函数，会发现无法访问到组件中的服务。为了解决这个问题，我们可以利用Angular 2的依赖注入机制，将服务注入到组件中，从而实现在定时器中访问到服务的目的。

在Angular 2中，依赖注入是一种设计模式，用于将一个对象的依赖关系从创建该对象的代码中解耦出来。通过依赖注入，我们可以在组件中声明需要使用的服务，而不需要直接实例化和管理这些服务。Angular 2会自动为我们完成服务的实例化和管理，并将实例注入到组件中。

依赖注入服务的方法

下面我们来看一个简单的例子，演示如何在组件中使用依赖注入来调用setInterval()函数。

首先，我们需要创建一个服务，用于封装定时器的逻辑。我们可以称之为TimerService。在这个服务中，我们可以实现一些定时器相关的功能，比如开始定时器、停止定时器等。

typescript
import { Injectable } from '@angular/core';
@Injectable()
export class TimerService {
  private intervalId: any;
  startTimer(callback: Function, interval: number) {
    this.intervalId = setInterval(() => {
      callback();
    }, interval);
  }
  stopTimer() {
    clearInterval(this.intervalId);
  }
}

在上面的代码中，我们使用@Injectable()装饰器来指示这是一个可以被注入的服务。然后，我们定义了一个私有变量intervalId来保存定时器的ID。接下来，我们实现了startTimer()方法和stopTimer()方法，分别用于开始和停止定时器。在startTimer()方法中，我们使用setInterval()函数来设置定时器，通过回调函数callback来执行定时器中的逻辑。

接下来，我们来创建一个组件，用于演示如何使用依赖注入来调用TimerService中的方法。

typescript
import { Component, OnInit } from '@angular/core';
import { TimerService } from './timer.service';
@Component({
  selector: 'app-timer',
  template: <code>
    <h1>Timer Example</h1>
    <button (click)="startTimer()">Start Timer</button>
    <button (click)="stopTimer()">Stop Timer</button>
  </code>,
  providers: [TimerService]
})
export class TimerComponent implements OnInit {
  constructor(private timerService: TimerService) { }
  ngOnInit() { }
  startTimer() {
    this.timerService.startTimer(() => {
      console.log('Timer is running...');
    }, 1000);
  }
  stopTimer() {
    this.timerService.stopTimer();
  }
}

在上面的代码中，我们首先通过@Component装饰器来定义一个组件，其中的template用于定义组件的HTML模板。在providers数组中，我们将TimerService添加进来，以便在组件中可以使用依赖注入来访问TimerService。

在组件的构造函数中，我们通过参数的方式声明了一个私有变量timerService，并使用private关键字将其标记为私有属性。这样，Angular 2会自动将TimerService的实例注入到这个变量中。

然后，我们实现了startTimer()方法和stopTimer()方法，在这两个方法中，我们通过this.timerService来调用TimerService中的方法。

通过使用依赖注入，我们可以在Angular 2中使用setInterval()函数，并访问到组件中的服务。这种方式可以使我们的代码更加模块化和可测试，同时也提高了代码的可维护性和可读性。因此，在开发Angular 2应用时，我们应该充分利用依赖注入机制，将服务注入到组件中，实现代码的解耦和重用。