Angular 14子路由跳转问题：左侧树节点频繁重载折叠

核心问题 #

你的MainComponent每次点击树节点都会重新实例化（触发ngOnInit），本质是路由配置错误，导致切换子路由时父组件被重复创建。

常见错误配置示例 #

如果你的路由配置是类似下面这样，每个子路由都单独声明了MainComponent，那么切换building和person路由时，Angular会认为是两个不同的路由条目，每次都会创建新的MainComponent实例：

const routes: Routes = [
  { path: 'building/:id', component: MainComponent, children: [{ path: '', component: BuildingComponent }] },
  { path: 'person/:id', component: MainComponent, children: [{ path: '', component: PersonComponent }] },
];

正确的路由配置 #

应该将MainComponent作为父路由容器，子路由嵌套在其下，这样切换子路由时父组件实例会被复用，不会重新初始化：

const routes: Routes = [
  { 
    path: 'main', // 父路由路径
    component: MainComponent, 
    children: [
      { path: 'building/:id', component: BuildingComponent },
      { path: 'person/:id', component: PersonComponent },
      // 可选：默认子路由，进入main时加载的组件
      { path: '', redirectTo: 'building/1', pathMatch: 'full' }
    ] 
  },
];

导航方式调整 #

在树节点点击事件中，确保导航路径是基于父路由的相对路径，或者使用正确的绝对路径：

方式1：相对路径（推荐，依赖当前路由上下文） #

在MainComponent中注入ActivatedRoute，然后使用相对路径导航：

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

constructor(private router: Router, private route: ActivatedRoute) {}

onTreeNodeClick(node: any) {
  if (node.type === 'building') {
    this.router.navigate(['./building', node.id], { relativeTo: this.route });
  } else if (node.type === 'person') {
    this.router.navigate(['./person', node.id], { relativeTo: this.route });
  }
}

方式2：绝对路径 #

直接使用完整的父路由+子路由路径：

onTreeNodeClick(node: any) {
  if (node.type === 'building') {
    this.router.navigate(['/main/building', node.id]);
  } else if (node.type === 'person') {
    this.router.navigate(['/main/person', node.id]);
  }
}

额外检查点 #

• 确认MainComponent的模板中只在正确位置放置了<router-outlet>，没有将其包裹在会触发组件重建的结构中（比如*ngIf绑定了路由相关的变量，导致父组件DOM被销毁重建）。
• 检查是否为MainComponent设置了自定义的路由复用策略，如果有，确保策略允许复用父组件实例。

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