如何在次级嵌套路由Outlet中通过NavigationExtras保留状态

核心问题在于：Angular路由的state是绑定到具体路由节点的，当你导航到secondary: 'about/subabout'时，about作为父路由节点，传递的state会附着在这个父节点上，子路由subabout的快照不会自动继承该state。

以下是两种基于state的简洁解决方案：

方案1：子路由直接读取父路由的State #

在subabout组件中，通过ActivatedRoute的parent属性直接获取父路由节点的state：

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

export class SubaboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    const parentRouteState = this.route.parent?.snapshot.state;
    if (parentRouteState) {
      const targetData = parentRouteState.data;
      console.log('从父路由state获取的数据:', targetData);
      // 在这里使用数据
    }
  }
}

这种方式无需修改路由配置或导航逻辑，直接在子组件中向上读取，适合简单场景。

方案2：利用路由Resolve守卫传递State #

通过路由的resolve守卫，在子路由激活前从导航state中提取数据并注入到子组件，实现数据传递与组件的解耦：

步骤1：创建Resolve守卫 #

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class SubaboutDataResolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot): any {
    // 获取当前导航的extras中的state数据
    const navigation = route.router.getCurrentNavigation();
    return navigation?.extras.state?.data;
  }
}

步骤2：修改子路由配置 #

在路由配置中为subabout绑定resolve守卫：

const routes: Routes = [
  // 主路由配置...
  {
    path: 'about',
    component: AboutComponent,
    children: [
      {
        path: 'subabout',
        component: SubaboutComponent,
        resolve: {
          targetData: SubaboutDataResolver
        }
      }
    ]
  }
];

步骤3：在子组件中接收数据 #

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

export class SubaboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.data.subscribe(data => {
      const targetData = data.targetData;
      console.log('通过Resolve获取的数据:', targetData);
      // 在这里使用数据
    });
  }
}

两种方案均无需依赖共享服务，完全基于Angular路由的state机制实现需求。

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