Angular多路由实现及login路由失效问题求助

一、基础实现步骤 #

• 1. 配置路由规则
  在路由模块（如app-routing.module.ts）中定义路由数组，每个路由对应一个路径和组件，同时可设置默认重定向和通配符路由：

  const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: '', redirectTo: '/login', pathMatch: 'full' }, // 访问根路径时自动跳转到登录页
    { path: '**', redirectTo: '/login' } // 匹配未定义的路径，统一重定向到登录页
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 2. 添加路由渲染容器
  在根组件模板（app.component.html）中必须加入<router-outlet></router-outlet>，Angular会把当前路由对应的组件渲染到这个容器里。

• 3. 实现路由跳转

  • 模板中用routerLink指令创建跳转链接：

    <a routerLink="/login">登录</a>
    <a routerLink="/dashboard">控制台</a>
    

  • 组件类中用Router服务编程式跳转：

    import { Router } from '@angular/router';
    
    constructor(private router: Router) {}
    
    navigateToDashboard() {
      this.router.navigate(['/dashboard']);
    }
    

• 4. 注册路由组件
  确保所有路由用到的组件都在模块的declarations数组中注册，比如你的AppModule里已经正确注册了LoginComponent和DashboardComponent，这一步没问题。

从提供的代码来看，路由配置本身是正确的，问题出在以下两个关键点：

1. 表单指令拼写错误（核心问题） #

在login.component.html中，表单控件绑定的指令名拼写错误：

• 用户名输入框：formControllerName → 正确应为formControlName
• 密码输入框：formContollerName → 正确应为formControlName

这个错误会导致表单控件无法和组件中的FormGroup绑定，提交时this.form.invalid始终为true，无法触发跳转逻辑，同时可能让你误以为路由没生效（实际访问localhost:4200/login时路由是正常的，只是表单功能异常）。

修复后的输入框代码：

<div class="form-group">
  <label for="exampleInputEmail1">Kullanıcı Ad</label>
  <input matInput type="text" formControlName="username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" name="username">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">Şifre</label>
  <input matInput type="password" formControlName="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

2. 确认根组件存在路由出口 #

检查app.component.html中是否包含<router-outlet></router-outlet>，如果没有，路由组件无法渲染，会导致所有路由都看不到内容。如果缺失，添加即可。

额外排查点 #

• 重启开发服务器：修改模板或路由配置后，重启ng serve确保变更生效；
• 查看浏览器控制台：打开F12开发者工具，检查Console面板是否有组件加载、模板解析等错误；
• 确认访问路径：确保访问的是localhost:4200/login（默认端口4200，若修改过需对应调整）。

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