Angular路由失效：点击Login按钮无法导航至/login路由

核心问题分析 #

1. 路由配置错误：根组件被错误加入路由规则 #

在app-routing.module.ts的路由数组中，你将AppComponent作为根路径（path: ""）的路由组件，这是错误的。AppComponent是Angular应用的启动根组件，路由系统的内容应该在它内部通过<router-outlet>渲染，而非将其作为路由目标组件。同时，这条错误的根路由会拦截后续的默认重定向规则，干扰正常路由匹配逻辑。

2. AppRoutingModule错误导入RouterOutlet #

RouterOutlet是用于渲染路由组件的占位符组件，应该在组件模板中使用，而非在模块的imports数组中导入。你在AppRoutingModule的imports里添加了RouterOutlet，不符合Angular模块规范，会引发不必要的配置冲突。

3. AppComponent模板缺少路由出口<router-outlet> #

当前app.component.html仅包含头部组件，没有添加<router-outlet>标签。这是路由失效最关键的原因：即使路由匹配成功，切换后的组件没有挂载容器，页面无任何变化，看起来就像路由未生效。

4. 自定义ButtonComponent未正确处理routerLink属性 #

routerLink是Angular的路由指令，需要直接绑定在原生可导航元素（如<a>、<button>）上。你的自定义AppButtonComponent若未将输入的routerLink属性传递给内部原生元素，点击按钮时无法触发路由导航。

修复方案 #

1. 修正路由配置（app-routing.module.ts） #

移除将AppComponent作为路由组件的规则，调整后的代码如下：

import { RouterModule, Routes } from "@angular/router";
import {
  CourseCardComponent,
  CourseFormComponent,
  LoginFormComponent,
  RegistrationFormComponent,
} from "./shared/components";
import { CoursesComponent } from "./features/courses/courses.component";
import { CourseInfoComponent } from "./features/course-info/course-info.component";

// 导入守卫
import { AuthorizedGuard } from "./auth/guards/authorized.guard";
import { NotAuthorizedGuard } from "./auth/guards/not-authorized.guard";
import { AdminGuard } from "./user/guards/admin.guard";
import { NgModule } from "@angular/core";

export const routes: Routes = [
  // 登录注册路由
  {
    path: "login",
    component: LoginFormComponent,
    // canActivate: [NotAuthorizedGuard],
  },
  {
    path: "registration",
    component: RegistrationFormComponent,
    // canActivate: [NotAuthorizedGuard],
  },

  // 课程相关路由
  { path: "courses", component: CoursesComponent, canLoad: [AuthorizedGuard] },
  {
    path: "courses/add",
    component: CourseFormComponent,
    // canActivate: [AdminGuard],
  },
  {
    path: "courses/:id",
    component: CourseInfoComponent,
    // canActivate: [AuthorizedGuard],
  },
  {
    path: "courses/edit/:id",
    component: CourseCardComponent,
    // canActivate: [AdminGuard],
  },

  // 默认和通配路由
  { path: "", redirectTo: "/courses", pathMatch: "full" },
  { path: "**", redirectTo: "/courses", pathMatch: "full" },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // 移除RouterOutlet导入
  exports: [RouterModule],
})
export class AppRoutingModule {}

2. 为AppComponent添加路由出口（app.component.html） #

在模板中添加<router-outlet>，作为路由组件的渲染容器：

<app-header>
  <app-button button_text="Login" routerLink="/login"></app-button>
</app-header>
<router-outlet></router-outlet>

3. 修复自定义ButtonComponent的routerLink传递 #

修改ButtonComponent的代码，确保routerLink属性被正确传递给内部原生元素：

ButtonComponent.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-button",
  templateUrl: "./button.component.html",
  styleUrls: ["./button.component.scss"],
})
export class ButtonComponent {
  @Input() button_text!: string;
  @Input() routerLink?: string; // 添加routerLink输入属性
}

ButtonComponent.html

<button [routerLink]="routerLink">{{ button_text }}</button>

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