Angular 15路由跳转时ngOnInit重复调用的问题解决咨询

从编辑组件通过路由跳转回主页时，编辑页面的ngOnInit()会在组件卸载/销毁前被再次调用，跳转代码如下：

this.router.navigate(['../../'], { relativeTo: this.route });

• 修正路由跳转方式，避免相对路由歧义
  相对路由../../可能因当前路由层级解析问题，意外触发组件的重新初始化。建议改用绝对路由直接跳转到主页，路径更明确：

  this.router.navigate(['/home']); // 替换为你的主页实际路由路径
  

• 检查并调整路由配置
  查看根路由模块的RouterModule.forRoot()配置，确认是否设置了onSameUrlNavigation: 'reload'，这种配置会导致同URL导航时重新加载组件。将其改为ignore：

  RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'ignore'
  })
  

• 清理未取消的订阅
  如果编辑组件中订阅了路由参数（比如this.route.params.subscribe(...)），未在ngOnDestroy中取消订阅的话，跳转时可能触发订阅回调，间接导致ngOnInit相关逻辑被误执行。务必在组件销毁时清理订阅：

  private paramSubscription!: Subscription;
  
  ngOnInit() {
    this.paramSubscription = this.route.params.subscribe(params => {
      // 你的参数处理逻辑
    });
  }
  
  ngOnDestroy() {
    this.paramSubscription.unsubscribe();
  }
  

• 检查路由复用策略
  Angular默认的路由复用策略可能在某些场景下重新创建组件实例。如果需要保留编辑组件实例，可以自定义路由复用策略，或者使用RouteReuseStrategy来控制组件的复用逻辑，避免不必要的初始化。

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