Angular中点击同一路由链接无法重复触发路由的问题求助

以下是几个可行的解决办法，根据你的场景选择：

方法1：全局配置允许同一URL导航重载 #

在根路由配置文件（app-routing.module.ts）中，添加onSameUrlNavigation配置，告诉Angular允许同一URL导航时重新触发路由生命周期：

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

同时，确保目标组件的路由配置中，runGuardsAndResolvers设置为always，这样每次导航（包括同一URL）都会执行守卫和解析器：

const routes: Routes = [
  {
    path: 'your-path',
    component: YourTargetComponent,
    runGuardsAndResolvers: 'always'
  }
];

方法2：组件内监听路由事件手动刷新 #

如果只需要特定组件处理重复点击刷新，在右侧加载内容的目标组件中，监听NavigationEnd事件，每次导航完成后执行数据加载逻辑：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 调用你的数据加载方法，比如初始化组件内容
    this.loadComponentData();
  });
}

private loadComponentData(): void {
  // 这里写你的数据获取或组件初始化逻辑
}

方法3：自定义指令强制触发路由导航 #

如果上述方法不满足需求，可以自定义一个指令覆盖默认routerLink的点击行为，强制重新导航到当前URL：

import { Directive, HostListener } from '@angular/core';
import { RouterLink, Router } from '@angular/router';

@Directive({
  selector: '[appForceRouterLink]'
})
export class ForceRouterLinkDirective extends RouterLink {
  constructor(router: Router) {
    super(router, null, null);
  }

  @HostListener('click')
  override onClick(): void {
    const currentUrl = this.router.url;
    if (this.urlTree.toString() === currentUrl) {
      // 先导航到临时路径（不修改地址栏），再导航回原路径
      this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
        this.router.navigate([currentUrl]);
      });
    } else {
      super.onClick();
    }
  }
}

然后在模板中替换原routerLink为自定义指令：

<li *ngFor="let item of menu">
   <a *ngSwitchCase="'link'" routerLinkActive="active" [appForceRouterLink]="item.routerLink">    
   <span class="pr-2">{{item.title}}</span></a>
</li>

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