You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular AppRoutingModule.redirectToLogin非函数报错排查

错误根因

你报redirectToLogin is not a function是三个问题叠加导致的:

  • AppRoutingModule类内仅声明了static redirectToLogin: any的空属性,没有绑定任何函数实现;类外部写的function redirectToLogin()是独立的全局函数,不属于类的静态方法,调用时自然找不到对应函数。
  • 就算把函数绑定到静态属性上,静态上下文也无法访问构造函数注入的Router实例——Angular依赖注入是给类实例赋值的,静态方法里的this不指向类实例,会直接拿不到router对象报undefined错误。
  • 路由模块的本职是维护路由配置,把公共跳转逻辑写在路由模块的静态方法里本身就不符合Angular开发规范。
修复方案

推荐实现(符合Angular开发规范)

直接在需要跳转的组件内注入Router完成跳转,不需要额外在路由模块封装静态方法:

  1. 修改home.component.ts:
// 顶部新增Router引入
import { Router } from '@angular/router';

// 构造函数增加Router注入
constructor(private GetRequest : LocationService, private router: Router) { 
  try {
    this.fetchLocation();
  } catch (error) {
    console.log("Error");
  }
}

// 替换原来的AppRoutingModule.redirectToLogin()调用
getBookingFormData()
{
  if (this.validateForm())
  {
    let currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (currentUser == null)
    {
      alert("Please login to book a trip");
      // 直接调用注入的router实例跳转
      this.router.navigate(['/login']);
    }
  }
}
  1. 清理app-routing.module.ts的冗余代码:删掉类内的static redirectToLogin: any声明、构造函数里多余的Router注入、类外部独立写的redirectToLogin函数,保持路由模块仅做路由配置即可。

额外排查点:你当前代码里HomeComponent的引入路径写的是./Componentes/home/home.component,Login、Signup组件的引入路径是./Components/开头,注意文件夹拼写保持一致,避免出现组件找不到的编译错误。

静态方法实现(不推荐)

如果你坚持要在AppRoutingModule上实现静态跳转方法,需要手动持有Router实例供静态上下文调用,修改app-routing.module.ts如下:

import { NgModule } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './Componentes/home/home.component';
import { LoginComponent } from './Components/login/login.component';
import { SignupComponent } from './Components/signup/signup.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'login/signup', component: SignupComponent },
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  // 静态持有Router实例
  private static routerIns: Router;
  constructor(private router: Router) {
    // 模块初始化时把注入的Router实例赋值给静态属性
    AppRoutingModule.routerIns = router;
  }
  // 实现静态跳转方法
  static redirectToLogin(): void {
    AppRoutingModule.routerIns.navigate(['/login']);
  }
}
// 删除类外部独立声明的redirectToLogin函数

内容的提问来源于stack exchange,提问作者Jay Mistry

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.01 00:24:21