Angular应用点击同一菜单时组件无法刷新的解决诉求

下面是几种实用的实现方式，按需选择即可：

方法1：配置路由并监听导航事件 #

通过修改路由配置，允许同一URL导航时触发重载，再监听导航完成事件执行刷新逻辑。

1. 首先在路由模块中添加配置：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      onSameUrlNavigation: 'reload' // 开启同一URL导航重载
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在目标组件中监听导航结束事件，触发刷新：

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() {
  // 这里写你的数据加载或组件重置逻辑
}

方法2：通过路由参数触发刷新 #

点击菜单时给路由添加随机参数（比如时间戳），让Angular认为路由发生变化，从而触发组件刷新。

1. 菜单点击事件处理：

onMenuClick() {
  this.router.navigate(['/your-target-path'], {
    queryParams: { t: Date.now() }, // 添加随机时间戳参数
    queryParamsHandling: 'merge' // 保留原有查询参数（可选）
  });
}

2. 在目标组件中监听参数变化：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    // 只要参数变化，就执行刷新逻辑
    this.loadComponentData();
  });
}

方法3：手动销毁重建组件 #

利用*ngIf指令控制组件的显示隐藏，通过短暂隐藏再显示的方式触发组件重建。

1. 父组件模板（假设目标组件是<app-target>）：

<app-target *ngIf="showComponent"></app-target>

2. 父组件逻辑：

showComponent = true;

onMenuClick() {
  // 先隐藏组件
  this.showComponent = false;
  // 利用定时器触发Angular变更检测，重建组件
  setTimeout(() => {
    this.showComponent = true;
  }, 0);
}

方法4：自定义路由复用策略 #

通过自定义RouteReuseStrategy，禁止Angular重用同一路由的组件实例。

1. 创建自定义策略类：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class NoRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 仅当路由配置不同时才重用，同一路由直接返回false强制重建
    return future.routeConfig !== curr.routeConfig;
  }
}

2. 在根模块中提供该策略：

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: NoRouteReuseStrategy }
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Muhammad Ra-ees Raza Peeroo