Angular中如何仅从oldPath重定向时向home组件传递数据？

原路由配置 #

const routes: Routes = [
  {path : '', redirectTo:'home'},
  {path : 'oldPath', redirectTo:'home', data: {defaultAction: 'oldPath'}},
  {path : 'home', component : HomeComponent, resolve:{shapeLoaded:IntegrationResolver}}
];

需求说明 #

仅当从oldPath路径重定向到HomeComponent时传递defaultAction: 'oldPath'数据，从空路径''重定向时不传递，且不重复配置home路由条目。

可行方案 #

方案1：利用路由导航状态（state）传递临时数据 #

通过守卫触发带状态的导航，替代直接重定向，避免路由data的全局绑定：

1. 修改路由配置：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { 
    path: 'oldPath', 
    canActivate: [OldPathRedirectGuard] 
  },
  { path: 'home', component: HomeComponent, resolve: { shapeLoaded: IntegrationResolver } }
];

2. 创建重定向守卫：

@Injectable({ providedIn: 'root' })
export class OldPathRedirectGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    this.router.navigate(['/home'], { 
      state: { defaultAction: 'oldPath' },
      replaceUrl: true // 模拟重定向的历史记录替换效果
    });
    return false;
  }
}

3. 在HomeComponent中获取状态数据：

constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  if (navigation?.extras.state?.defaultAction === 'oldPath') {
    // 执行从oldPath跳转过来的专属逻辑
  }
}

方案2：直接在组件内判断来源路由 #

无需额外守卫或组件，直接在HomeComponent中追踪上一次导航的来源：

1. 简化路由配置（移除oldPath的data属性）：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'oldPath', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, resolve: { shapeLoaded: IntegrationResolver } }
];

2. 在HomeComponent中判断来源：

constructor(private router: Router) {
  const previousNav = this.router.getCurrentNavigation()?.previousNavigation;
  if (previousNav?.finalUrl?.toString() === '/oldPath') {
    // 这里处理需要传递的data逻辑，比如设置组件变量
    this.defaultAction = 'oldPath';
  }
}

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