Angular点击按钮实现页面路由跳转时报错如何解决？

核心问题原因 #

• goToPage方法使用普通函数表达式赋值，触发点击事件时this指向发生偏移，无法绑定到当前组件实例，因此取不到注入的Router对象，调用this.router.navigate就会抛出未定义的报错
• 附加排查项：若修复this指向后仍报错，需检查路由配置中是否存在与传入参数大小写完全匹配的Login路径

修复代码 #

1. TS文件修改（二选一即可） #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router){ }

  // 方案1：改用箭头函数，自动绑定this到组件实例
  goToPage = (pageName:string) => {
    this.router.navigate([pageName]);
  }

  // 方案2：直接声明为类方法（更符合Angular编码规范）
  // goToPage(pageName:string): void {
  //   this.router.navigate([pageName]);
  // }

  title = 'sign-up';
}

2. （可选）路由配置检查 #

确认app-routing.module.ts中已注册对应路由，路径大小写和跳转传入的参数完全一致：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  // 其他路由配置
  {
    path: 'Login',
    component: LoginComponent
  }
];

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

3. HTML代码无需修改，原有逻辑有效 #

<button mat-raised-button (click)="goToPage('Login')">Sign up</button>

内容的提问来源于stack exchange，提问作者Dunmol