Angular路由跳转异常：点击routerLink链接无响应，但直接访问URL可进入详情页

这种情况确实挺让人困惑的——明明直接输URL能正常访问详情页，点击页面上的routerLink却没反应，大概率是路由链接的配置或者模块导入的细节出了问题。我帮你梳理几个可能的排查方向和解决办法：

1. 优先检查routerLink的路径格式 #

你当前的routerLink写法是：

<a [routerLink]="['portfolio/shareholder-information-details/']">{{shareholder.isincode}}</a>

这里的问题在于路径的层级匹配：

• 如果你当前页面的路由是/portfolio/shareholder-information，那么用相对路径的话，需要用../回到父级路由，再指向详情页；
• 更稳妥的是用绝对路径（开头加斜杠），避免当前路由层级变化影响跳转。

修改后的代码可以二选一：

<!-- 绝对路径写法（推荐，不受当前路由层级影响） -->
<a [routerLink]="['/portfolio/shareholder-information-details']">{{shareholder.isincode}}</a>

<!-- 相对路径写法（仅适用于当前路由为/shareholder-information的场景） -->
<a [routerLink]="['../shareholder-information-details']">{{shareholder.isincode}}</a>

2. 确认特性模块的RouterModule导入方式 #

在shareholder-information.module.ts里，你导入了RouterModule，但对于特性模块的路由配置，需要确保父模块（PortfolioModule）是通过RouterModule.forChild()来注册路由的：

// portfolio.module.ts示例
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { portfolioRoutes } from './portfolio-routing';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(portfolioRoutes), // 必须用forChild注册特性路由
    ShareholderInformationModule
  ]
})
export class PortfolioModule { }

如果路由没有通过forChild正确注册，Angular的路由系统可能无法识别routerLink对应的目标路由。

3. 检查Portfolio模块是否被正确加载到根路由 #

确保PortfolioModule已经被正确注册到根路由中，要么直接导入到根模块，要么通过懒加载配置：

// 根路由配置示例
const routes: Routes = [
  // ...其他路由
  {
    path: 'portfolio',
    loadChildren: () => import('./portfolio/portfolio.module').then(m => m.PortfolioModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果Portfolio模块没有被根路由正确加载，即使直接输URL能访问，routerLink的导航逻辑也可能找不到对应的路由映射。

4. 排查是否有路由守卫阻止导航（可选） #

打开浏览器开发者工具的Console标签，点击链接时观察是否有路由相关的报错。如果你的详情页或父路由配置了CanActivate等路由守卫，且守卫逻辑返回false，也会导致导航失败（直接输URL时守卫逻辑可能有差异）。

先从routerLink的路径格式入手排查，这是这类问题最常见的原因，应该能解决你的问题。

备注：内容来源于stack exchange，提问作者pops1348