angular - 无法读取 angular2 组件函数中未定义的属性 'navigate'

Question

我正在尝试在倒计时后导航。这是我的代码

 constructor(
     private router: Router
    ) {}


onsubmit(){
        //I call the count down function here
        this.countdown();
      }

countDown() {
        var i = 5;
         var myinterval = setInterval(function() {
            document.getElementById("countdown").innerHTML = "redirecting in: " + i;
            if (i === 0) {
                clearInterval(myinterval );
                 this.router.navigate(['/About']);
            }
            else {
                i--;
            }
        }, 1000);
     }

倒计时显示正常，但是当它到达导航部分时，我收到此错误:

EXCEPTION: Cannot read property 'navigate' of undefined

它做错了什么？

Answer 1

在 setInterval 函数中使用 Arrow function，这将使 Component `` this(context) 在 setInterval 中可用> 功能。

代码

 var myinterval = setInterval(() => { //<-- user arrow function
    document.getElementById("countdown").innerHTML = "redirecting in: " + i;
    if (i === 0) {
        clearInterval(myinterval );
         this.router.navigate(['/About']);
    }
    else {
        i--;
    }
}, 1000);