Angular 2调用setInterval()undefined服务表单依赖注入

时间:2021-10-14 13:08:41

I want to call a function every 10 minutes by using setInterval() and in this function I want to use a Service (called auth) that I get from the Dependency Injector of Angular 2, the problem is that the console tells me following:

我想通过使用setInterval()每隔10分钟调用一个函数,在这个函数中我想使用一个从Angular 2的Dependency Injector获得的Service(称为auth),问题是控制台告诉我以下内容:

EXCEPTION: TypeError: this.auth is undefined

EXCEPTION:TypeError:this.auth未定义

  constructor(private auth: AuthService){
    setInterval(function(){ this.auth.refreshToken(); }, 1000 * 60 * 10);
  }

3 个解决方案

#1


47  

this in the function given to setInterval doesn't point to the class when it is called.

在setInterval给出的函数中,这个函数在调用时并不指向类。

Use arrow function instead.

请改用箭头功能。

 constructor(private auth: AuthService){
    setInterval(() => { this.auth.refreshToken(); }, 1000 * 60 * 10);
  }

#2


4  

A full discussion of this issue can be found in the documentation for the setInterval() method, captioned The "this" Problem. About halfway down the page.

有关此问题的完整讨论可以在setInterval()方法的文档中找到,标题为“this”问题。大约在页面的一半。

The jist is that it is the result of a change in the "this" variable. The function being passed into the setInterval() function is extracted from the class context and placed into the context of setInterval() (the window). So, it is undefined.

问题在于它是“this”变量发生变化的结果。传递给setInterval()函数的函数从类上下文中提取并放入setInterval()(窗口)的上下文中。所以,它是未定义的。

There are several solutions to this issue. The method proposed by toskv above is a fairly common approach. Another solution is to use the bind() method.

这个问题有几种解决方案。上面toskv提出的方法是一种相当常见的方法。另一种解决方案是使用bind()方法。

constructor(private auth: AuthService) {
    setInterval(this.auth.refreshToken.bind(this), 1000 * 60 * 10);
}

Reference material from this question, answer by Pointy.

来自这个问题的参考资料,由Pointy回答。

Documentation for the bind() method.

bind()方法的文档。

A good article on javascript scope, which can still come back to bite you in typescript.

关于javascript范围的一篇很好的文章,它仍然可以让你在打字稿中咬你。

#3


0  

There's a little trick for solving that. Hope this helps.

解决这个问题有一个小技巧。希望这可以帮助。

First do

先做

const this1 = this;

then

然后

constructor(private auth: AuthService) {
    setInterval(this1.auth.refreshToken.bind(this), 1000 * 60 * 10);
}

#1


47  

this in the function given to setInterval doesn't point to the class when it is called.

在setInterval给出的函数中,这个函数在调用时并不指向类。

Use arrow function instead.

请改用箭头功能。

 constructor(private auth: AuthService){
    setInterval(() => { this.auth.refreshToken(); }, 1000 * 60 * 10);
  }

#2


4  

A full discussion of this issue can be found in the documentation for the setInterval() method, captioned The "this" Problem. About halfway down the page.

有关此问题的完整讨论可以在setInterval()方法的文档中找到,标题为“this”问题。大约在页面的一半。

The jist is that it is the result of a change in the "this" variable. The function being passed into the setInterval() function is extracted from the class context and placed into the context of setInterval() (the window). So, it is undefined.

问题在于它是“this”变量发生变化的结果。传递给setInterval()函数的函数从类上下文中提取并放入setInterval()(窗口)的上下文中。所以,它是未定义的。

There are several solutions to this issue. The method proposed by toskv above is a fairly common approach. Another solution is to use the bind() method.

这个问题有几种解决方案。上面toskv提出的方法是一种相当常见的方法。另一种解决方案是使用bind()方法。

constructor(private auth: AuthService) {
    setInterval(this.auth.refreshToken.bind(this), 1000 * 60 * 10);
}

Reference material from this question, answer by Pointy.

来自这个问题的参考资料,由Pointy回答。

Documentation for the bind() method.

bind()方法的文档。

A good article on javascript scope, which can still come back to bite you in typescript.

关于javascript范围的一篇很好的文章,它仍然可以让你在打字稿中咬你。

#3


0  

There's a little trick for solving that. Hope this helps.

解决这个问题有一个小技巧。希望这可以帮助。

First do

先做

const this1 = this;

then

然后

constructor(private auth: AuthService) {
    setInterval(this1.auth.refreshToken.bind(this), 1000 * 60 * 10);
}