Angular默认子路由传递Router State异常问题求助

问题原因 #

当前路由配置里，空路径直接重定向到general，但重定向操作不会携带任何路由状态。只有通过[routerLink]结合[state]手动点击标签页时，才会把flDetails作为状态传递给子路由。所以初始加载时，FunctionalLocationDetailsGeneralComponent拿不到状态数据。

解决方案 #

方案1：父子组件直接传值（推荐） #

路由State更适合临时导航场景，组件间共享数据优先用父子组件通信：

1. 修改子组件，添加@Input接收数据：

// FunctionalLocationDetailsGeneralComponent
import { Component, Input } from '@angular/core';
import { FunctionalLocationDetails } from '你的类型定义路径';

@Component({
  selector: 'app-fl-general',
  templateUrl: './functional-location-details-general.component.html',
  styleUrls: ['./functional-location-details-general.component.css']
})
export class FunctionalLocationDetailsGeneralComponent {
  @Input() flDetails!: FunctionalLocationDetails;
}

2. 父组件HTML中，在路由出口处绑定输入属性：

<!-- 父组件HTML -->
<div class="container-fluid m-3" *ngIf="flDetails">
  <ul class="nav nav-tabs d-flex ms-auto flex-row m-4">
    <li class="nav-item">
      <button class="nav-link" type="button" [routerLink]="['general']" 
      [routerLinkActive]="['active']">General</button>
    </li>
    <li class="nav-item">
      <button class="nav-link" type="button" [routerLink]="['measuring-points']" [routerLinkActive]="['active']">
        Measuring points
      </button>
    </li>
    <li class="nav-item">
      <button class="nav-link" type="button" [routerLink]="['maintenance']" [routerLinkActive]="['active']">
        Maintenance
      </button>
    </li>
  </ul>
  <!-- 路由出口绑定flDetails -->
  <router-outlet [flDetails]="flDetails"></router-outlet>
</div>

方案2：手动触发带状态的导航 #

在父组件数据加载完成后，手动导航到general并携带state：

// 父组件修改
import { ActivatedRoute, Router } from '@angular/router';

// ... 其他代码 ...
constructor(
  private readonly flService: FunctionalLocationService,
  private readonly router: Router,
  private readonly route: ActivatedRoute
) {}

ngOnInit(): void {
  this.flService.getFunctionalLocationById(this.flId).subscribe({
    next: (flDetails: FunctionalLocationDetails) => {
      this.flDetails = flDetails;
      // 手动导航到general并传递状态
      this.router.navigate(['./general'], { 
        relativeTo: this.route,
        state: { example: flDetails }
      });
    },
  });
}

同时修改路由配置，去掉重定向（避免自动无状态跳转）：

const routes: Routes = [
{
  path: ':flId',
  component: FunctionalLocationDetailsComponent,
  children: [
    // 移除重定向配置
    {
      path: 'general',
      component: FunctionalLocationDetailsGeneralComponent,
    },
    {
      path: 'measuring-points',
      component: FunctionalLocationDetailsMeasuringPointsComponent,
    },
    {
      path: 'maintenance',
      component: FunctionalLocationDetailsMaintenanceComponent,
    },
]}];

方案3：使用路由Resolve守卫预加载数据 #

通过Resolve守卫在路由激活前加载数据，把数据存入路由data，子组件直接从路由获取：

1. 创建Resolve守卫：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { FunctionalLocationService } from '你的服务路径';
import { FunctionalLocationDetails } from '你的类型路径';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FlDetailsResolver implements Resolve<FunctionalLocationDetails> {
  constructor(private flService: FunctionalLocationService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<FunctionalLocationDetails> {
    const flId = +route.paramMap.get('flId')!;
    return this.flService.getFunctionalLocationById(flId);
  }
}

2. 修改路由配置添加resolve：

const routes: Routes = [
{
  path: ':flId',
  component: FunctionalLocationDetailsComponent,
  resolve: { flDetails: FlDetailsResolver },
  children: [
    { path: '', redirectTo: 'general', pathMatch: 'full' },
    {
      path: 'general',
      component: FunctionalLocationDetailsGeneralComponent,
    },
    // ... 其他子路由 ...
  ]
}];

3. 父/子组件获取数据：

// 父组件
import { ActivatedRoute } from '@angular/router';

// ...
constructor(private readonly route: ActivatedRoute) {}

ngOnInit(): void {
  this.route.data.subscribe(data => {
    this.flDetails = data['flDetails'];
  });
}

// 子组件
constructor(private route: ActivatedRoute) {
  this.route.parent?.data.subscribe(data => {
    const flDetails = data['flDetails'];
    console.log(flDetails);
  });
}

总结 #

优先用方案1，组件间通信更直接且符合Angular最佳实践；如果必须依赖路由状态，用方案2；如果需要路由激活前就加载数据，用方案3。

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