Angular中新增ngFor列表项后routerLink跳转异常问题排查

常见原因及修复方案 #

1. 路由路径用相对路径导致解析错误 #

你当前的routerLink是'projects/' + project.code + '/home'，属于相对路径，会基于当前页面的路由去拼接。如果当前页面本身在子路由里，就会拼出错误路径，最终跳去根路由。

修复：改成绝对路径，在开头加斜杠/，强制从根路径开始解析：

<div class="link" [routerLink]="'/projects/' + project.code + '/home'">

2. 新项目的code字段为空 #

新增项目时如果project.code没赋值或者是空字符串，生成的路由会是/projects//home，这种无效路径Angular匹配不到，就会跳去根路由。

修复：

• 检查新增项目的逻辑，确保code字段被正确赋值（比如表单提交时做非空校验）；
• 模板里加个空值判断，避免生成无效链接：

<div class="link" *ngIf="project.code" [routerLink]="'/projects/' + project.code + '/home'">

3. 路由配置里没有匹配的规则 #

去你的app-routing.module.ts里检查，有没有配置projects/:code/home的路由，参数名要和project.code对应（别写成id之类的）：

const routes: Routes = [
  // 其他路由...
  {
    path: 'projects/:code/home',
    component: ProjectHomeComponent // 替换成你实际的组件
  }
];

如果没这个配置，Angular找不到对应路由，就会跳去根路由。

4. 变更检测没正确更新绑定（少见但可排查） #

虽然页面更新了列表，但可能Angular的变更检测没同步更新routerLink的值。可以手动触发：

• 组件里注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

• 获取新项目列表后调用：

this.projects = newProjects;
this.cdr.detectChanges();

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