尝试使用构造函数中声明的路由进行 router.navigate 时，this.route 未定义，并且它适用于所有其他组件

Question

我正在使用路由器导航和 setTimeout 从简单的祝贺页面转到另一个组件。 我在所有其他组件中做了同样的事情，它一直有效，我似乎无法理解为什么在这种情况下它不起作用。 这是组件的 ts：

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

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

constructor(private route: Router) { }
   public toUpload(){
      this.route.navigate(['fileUpload']);
   }

   ngOnInit(): void {
     setTimeout(this.toUpload, 5000);
   }
 }

这是我得到的错误：

ERROR TypeError: this.route is undefined
toUpload file-successfull.component.ts:13
Angular 17
ngOnInit file-successfull.component.ts:17
Angular 19
RxJS 6
Angular 20
RxJS 22

这是我的应用程序路由模块：

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomepageComponent } from './components/homepage/homepage.component';
import { LoginComponent } from './components/login/login.component';
import { SubscribedComponent } from './components/subscribed/subscribed.component';
import { GoogleLandingPageComponent } from './components/google-landing-page/google-landing-page.component';
import { GoogleErrorComponent } from './components/google-error/google-error.component';
import { FileUploadComponent } from './components/file-upload/file-upload.component';
import { FileUploadErrorComponent } from './components/file-upload-error/file-upload-error.component';
import { UserHomepageComponent } from './components/user-homepage/user-homepage.component';
import { FileSuccessfullComponent } from './components/file-successfull/file-successfull.component';

const routes: Routes = [{
  path: 'home', component: HomepageComponent
},{
  path: 'login', component: LoginComponent
},{
  path: 'subscribed', component: SubscribedComponent
},{
  path: 'google', component: GoogleLandingPageComponent
},{
  path: 'googleerror', component: GoogleErrorComponent
},{
  path: 'fileUpload', component: FileUploadComponent
},{
  path: 'fileUploadError', component: FileUploadErrorComponent
},{
  path: 'userHomepage', component: UserHomepageComponent
},{
  path: 'fileSuccessfull', component: FileSuccessfullComponent
},{
  path: '**', redirectTo: 'home'
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我知道这可能是一个愚蠢的初学者错误，但是有人可以帮助我吗？

Answer 1

传递函数时，会创建一个新的

this

上下文。如果此函数在内部使用

this

，这可能会出现问题。要修复它，您需要像下面这样绑定函数：

ngOnInit(): void {
  setTimeout(this.toUpload.bind(this), 5000);
}

或者，您可以调用该函数并将其包装在箭头函数中：

ngOnInit(): void {
  setTimeout(() => this.toUpload(), 5000);
}