Angular按钮routerLink跳转失效，输入URL正常如何修复？

问题场景代码 #

app.routes.ts代码 #

import { Routes } from '@angular/router';
import { HomePageComponent } from '../layout/home/home-page/home-page.component';
import { LoginPageComponent } from '../layout/login/login-page/login-page.component';

export const routes: Routes = [
  {
    path: '',
    component: HomePageComponent,
    title: 'HomePage',
  },
  {
    path: 'login',
    component: LoginPageComponent,
    title: 'LoginPage',
  },
  {
    path: 'singup',
    component: LoginPageComponent,
    title: 'Signup',
  },
];

按钮组件代码 #

<app-base-button-light
        title="Log in"
        routerLink="/login"
      ></app-base-button-light>
      <app-base-button-dark
        title="Sign in"
        routerLink="/login"
      ></app-base-button-dark>

问题现象 #

直接在浏览器地址栏输入/login可正常访问对应页面，但点击带有routerLink="/login"属性的自定义按钮组件时，无法触发路由跳转，且控制台无任何报错信息。

• 检查自定义组件是否传递routerLink属性
  自定义组件app-base-button-light和app-base-button-dark需要显式接收routerLink输入属性，并绑定到内部原生元素（如<a>或<button>）上。若组件内部未处理该属性，routerLink指令不会生效。

  示例修改（以app-base-button-light为例）：

  // base-button-light.component.ts
  import { Component, Input } from '@angular/core';
  import { RouterModule } from '@angular/router';
  
  @Component({
    selector: 'app-base-button-light',
    template: `<a [routerLink]="routerLink" class="light-button">{{ title }}</a>`,
    standalone: true,
    imports: [RouterModule]
  })
  export class BaseButtonLightComponent {
    @Input() title!: string;
    @Input() routerLink!: string | any[];
  }
  

• 确保自定义组件导入RouterModule
  若自定义组件为独立组件（standalone），必须在imports数组中导入RouterModule，否则routerLink指令无法被识别；若为NgModule组件，需确保所在模块已导入RouterModule。

• 检查是否存在事件阻止逻辑
  查看自定义按钮组件内部代码，是否有event.preventDefault()或event.stopPropagation()这类阻止默认行为的代码，此类逻辑会导致routerLink的跳转动作失效。

• 确认RouterOutlet配置正确
  尽管直接输URL能访问，仍需确认根组件（如app.component.html）中存在<router-outlet></router-outlet>，这是Angular路由渲染组件的必要容器。

• 手动调用Router服务跳转（临时方案）
  若上述方法无效，可在自定义组件中注入Router服务，通过点击事件手动触发跳转：

  // base-button-light.component.ts
  import { Component, Input } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-base-button-light',
    template: `<button (click)="navigate()" class="light-button">{{ title }}</button>`,
    standalone: true
  })
  export class BaseButtonLightComponent {
    @Input() title!: string;
    @Input() routerLink!: string;
  
    constructor(private router: Router) {}
  
    navigate() {
      this.router.navigate([this.routerLink]);
    }
  }
  

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