組件內的Angular 2路由不起作用（this.router.navigate不起作用）

Question

我試圖開發一個angular 2應用程序，一旦滿足特定條件，該應用程序將路由到另一個組件，為此，我使用了this.router.navigate方法，但它似乎沒有執行，因為它一直顯示“無法讀取屬性'navigate'未定義”錯誤。 將不勝感激任何幫助:)

具體組成

import { Component, OnInit } from '@angular/core';

import { RouterModule, Routes, Router } from '@angular/router';

@Component({
  selector: 'app-searching',
  templateUrl: './searching.component.html',
  styleUrls: ['./searching.component.css']
})
export class SearchingComponent implements OnInit {

constructor(private router:Router) { }

ngOnInit() {
 var elem = document.getElementById("rightSideMovingProgressBar"); 
 var elem2 = document.getElementById("progressText");
 var height = 100;
 var height2 = 0;
 var id = setInterval(frame, 20);
 function frame() {
    if (height <= 0) {
        clearInterval(id);
        this.router.navigate(['/details']);
    } else {
        height--;
        height2++; 
        elem.style.height = height + 'vh';
        elem2.innerHTML = height2 + '%'; 
    }
  } 
}

}

錯誤

Answer 1

這是因為this在frame不再指向組件。 使用以下內容：

 var id = setInterval(()=>{ frame() }, 20);

閱讀本答案以及本答案，以獲取更多信息以及使用bind和bound class properties其他可能方法。

Answer 2

您可以存儲this到一個變量：

var that = this ;

在您可以用作的功能內

that.router.navigate(['/details']);

希望這可以幫助 ：）