Angular 5 routerLink点击无跳转无报错问题求助

这种情况我之前排查过好几次，控制台没报错但路由不跳转，大概率是路由配置或者组件结构的细节没处理对，咱们一步步来排查：

• 检查路由配置的层级是否匹配
  首先得确认你的路由配置文件（比如app-routing.module.ts或者特性模块的路由文件）里有没有正确配置update-product路由，还要注意它和product路由的层级关系：

  • 如果update-product是product的子路由，配置应该是这样的：

    const routes: Routes = [
      {
        path: 'product',
        component: ProductComponent,
        children: [
          { path: 'update-product', component: UpdateProductComponent } // 确保UpdateProductComponent已正确导入
        ]
      }
    ];
    

  • 如果update-product是独立的根路由，那你的routerLink应该写成/update-product（带开头的斜杠，从根路由出发），而不是相对路径./update-product。

• 确认模块是否导入了RouterModule
  声明ProductComponent的模块（比如ProductModule）必须导入RouterModule，如果是特性模块要使用forChild方法：

  import { RouterModule } from '@angular/router';
  
  @NgModule({
    imports: [
      // 这里放你的子路由配置
      RouterModule.forChild([/* 路由规则 */])
    ],
    declarations: [ProductComponent]
  })
  export class ProductModule { }
  

• 检查路由出口是否存在
  如果update-product是product的子路由，那ProductComponent的模板里必须包含<router-outlet></router-outlet>，否则子路由组件没有地方渲染，看起来就像没跳转一样。

• 测试手动输入路由路径
  你可以在浏览器地址栏手动输入预期的跳转路径（比如/product/update-product），如果手动输入也无法加载组件，那基本可以确定是路由配置的问题，重点检查路由路径、组件导入是否正确。

• 排除RouterLinkActive的干扰
  虽然样式类一般不会影响跳转，但可以先暂时去掉routerLinkActive="active"属性，测试按钮是否能正常跳转，排除样式类可能带来的意外问题。

• 检查路由守卫是否阻止了跳转
  如果你给update-product路由配置了canActivate、canLoad之类的路由守卫，有可能守卫返回了false或者异步验证没通过，而且没有打印日志，导致看起来没跳转但控制台无报错。可以暂时注释掉守卫规则，测试是否能正常跳转。

内容的提问来源于stack exchange，提问作者Niladri Banerjee - Uttarpara