Angular 16路由：如何在子组件间保留状态及用户表单输入？

针对你遇到的切换子路由后ChildComponent1重新加载、丢失表单状态的问题，这里有几个实用的解决办法：

1. 自定义路由复用策略（RouteReuseStrategy） #

Angular默认会在路由切换时销毁组件实例，通过自定义RouteReuseStrategy可以指定某些路由的组件实例被缓存，切换回来时直接复用，不需要重新初始化。

实现步骤： #

• 创建一个自定义复用策略类：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes = new Map<string, DetachedRouteHandle>();

  // 判断当前路由是否需要复用
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  // 判断是否应该缓存当前路由
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 指定要缓存的路由，比如匹配child1的路由
    return route.routeConfig?.path === 'child1';
  }

  // 缓存路由实例
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const key = this.getRouteKey(route);
    this.storedRoutes.set(key, handle);
  }

  // 判断是否应该恢复缓存的路由
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const key = this.getRouteKey(route);
    return this.storedRoutes.has(key);
  }

  // 恢复缓存的路由实例
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const key = this.getRouteKey(route);
    return this.storedRoutes.get(key) || null;
  }

  // 生成唯一的路由key，考虑父路由的customId参数
  private getRouteKey(route: ActivatedRouteSnapshot): string {
    let key = route.routeConfig?.path || '';
    // 加上父路由的customId，确保不同customId下的child1缓存独立
    const parentRoute = route.parent;
    if (parentRoute?.params['customId']) {
      key += `_${parentRoute.params['customId']}`;
    }
    return key;
  }
}

• 在AppModule中提供这个策略：

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule {}

这个方案能完整保留组件实例的所有状态，包括表单输入和已加载的动态表单配置，适合需要严格保留组件状态的场景。

2. 将状态存储在共享服务或父组件中 #

把ChildComponent1的表单数据、API返回的动态表单配置存储到一个全局共享服务，或者父组件ComponentA中。这样每次切换回child1时，先读取存储的状态，不需要重新调用API和重建表单。

实现示例： #

• 创建共享状态服务：

import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Injectable({ providedIn: 'root' })
export class Child1StateService {
  // 存储API返回的表单配置
  formConfig: any = null;
  // 存储表单的当前值
  formValue: any = null;
}

• 在ChildComponent1中使用这个服务：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Child1StateService } from './child1-state.service';
import { ApiService } from './api.service';

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html'
})
export class ChildComponent1 implements OnInit {
  dynamicForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private stateService: Child1StateService,
    private apiService: ApiService
  ) {}

  ngOnInit(): void {
    if (this.stateService.formConfig) {
      // 已有缓存的配置，直接重建表单并赋值
      this.buildDynamicForm(this.stateService.formConfig);
      this.dynamicForm.setValue(this.stateService.formValue);
    } else {
      // 首次加载，调用API获取配置
      this.apiService.getFormConfig().subscribe(config => {
        this.stateService.formConfig = config;
        this.buildDynamicForm(config);
      });
    }
  }

  // 监听表单值变化，实时保存到服务
  onFormChange(): void {
    this.stateService.formValue = this.dynamicForm.value;
  }

  private buildDynamicForm(config: any): void {
    // 根据配置创建动态表单的逻辑
    const formControls: any = {};
    config.fields.forEach(field => {
      formControls[field.name] = ['', field.validators];
    });
    this.dynamicForm = this.fb.group(formControls);
    // 订阅表单值变化
    this.dynamicForm.valueChanges.subscribe(() => this.onFormChange());
  }
}

这个方案灵活度高，不仅能保留状态，还能在其他组件中共享这些数据，适合需要跨组件同步状态的场景。

3. 使用*ngIf替代子路由（场景允许时） #

如果Child1和Child2不需要独立的路由路径，只是在父组件内切换显示，可以用*ngIf替代子路由。这样组件实例不会被销毁，状态会自动保留。

修改父组件ComponentA： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html'
})
export class ComponentA {
  activeChild = 'child1';

  switchChild(child: string): void {
    this.activeChild = child;
  }
}

<button (click)="switchChild('child1')">Child1</button>
<button (click)="switchChild('child2')">Child2</button>

<app-child1 *ngIf="activeChild === 'child1'"></app-child1>
<app-child2 *ngIf="activeChild === 'child2'"></app-child2>

这个方案最简单，不需要修改路由逻辑，适合不需要独立路由的简单切换场景。

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