Angular路由切换时如何重新加载CreateInvNoDateComponent实例？

当前场景下，首次进入CreateInvNoDateComponent功能正常，但切换到其他路由再返回时，输入新供应商发现组件仍保留原实例状态。以下是几种实用解决思路：

一、清理组件订阅与状态（基础修复） #

Angular默认会在路由离开时销毁组件，但如果组件内有未清理的订阅或残留状态，会导致看起来像原实例在运行。在组件中实现OnDestroy钩子，手动清理资源并重置状态：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Subscription } from 'rxjs';
import { YourSupplierService } from '../services/your-supplier.service';

@Component({
  selector: 'app-create-inv-no-date',
  templateUrl: './create-inv-no-date.component.html'
})
export class CreateInvNoDateComponent implements OnInit, OnDestroy {
  invoiceForm: FormGroup;
  private subscriptions = new Subscription();

  constructor(
    private fb: FormBuilder,
    private supplierService: YourSupplierService
  ) {}

  ngOnInit() {
    this.initForm();
    // 示例：订阅服务数据
    this.subscriptions.add(
      this.supplierService.selectedSupplier$.subscribe(supplier => {
        this.invoiceForm.patchValue({ supplier });
      })
    );
  }

  ngOnDestroy() {
    // 清理所有订阅
    this.subscriptions.unsubscribe();
    // 重置表单与组件状态
    this.invoiceForm.reset();
    this.supplierService.clearSelectedSupplier(); // 清理服务级别的残留状态
  }

  private initForm() {
    this.invoiceForm = this.fb.group({
      supplier: [''],
      // 其他表单字段
    });
  }
}

二、强制路由重新创建组件实例 #

通过修改路由配置，指定每次导航到该路由时都重新初始化组件：

在transactionsetc_routing.module.ts的路由配置中添加runGuardsAndResolvers: 'always'：

const routes: Routes = [
  {
    path: '',
    component: LandingTransetcComponent,
    children: [
      // 其他子路由
      {
        path: 'invnodate',
        component: CreateInvNoDateComponent,
        runGuardsAndResolvers: 'always' // 强制每次导航都重新创建组件实例
      }
      // 其他子路由
    ]
  }
];

三、监听路由参数变化重置状态 #

如果进入组件时依赖路由参数（比如供应商ID），可以监听路由参数变化，触发组件状态重置：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { YourSupplierService } from '../services/your-supplier.service';

@Component({
  selector: 'app-create-inv-no-date',
  templateUrl: './create-inv-no-date.component.html'
})
export class CreateInvNoDateComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private supplierService: YourSupplierService
  ) {}

  ngOnInit() {
    // 监听路由参数变化
    this.route.paramMap.pipe(
      switchMap(params => {
        const supplierId = params.get('supplierId');
        // 重置组件状态
        this.resetComponentState();
        // 加载新供应商数据
        return this.supplierService.getSupplierById(supplierId);
      })
    ).subscribe(supplier => {
      // 渲染新供应商数据
      this.loadSupplierData(supplier);
    });
  }

  private resetComponentState() {
    // 重置表单、数据变量等
    this.invoiceForm?.reset();
    this.currentSupplier = null;
  }

  private loadSupplierData(supplier: any) {
    // 处理供应商数据渲染逻辑
  }
}

四、自定义路由复用策略（彻底禁用组件缓存） #

如果默认的路由复用策略导致组件被缓存，可以自定义策略，禁止CreateInvNoDateComponent被复用：

1. 创建自定义复用策略类：

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

export class NoComponentReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false; // 不缓存任何路由组件
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false; // 不恢复任何缓存的组件
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 仅当路由配置完全相同时复用，否则重新创建实例
    return future.routeConfig === curr.routeConfig;
  }
}

2. 在main.ts中注册该策略：

import { RouteReuseStrategy } from '@angular/router';
import { NoComponentReuseStrategy } from './app/no-component-reuse.strategy';

bootstrapApplication(AppComponent, {
  providers: [
    // 其他现有provider
    { provide: RouteReuseStrategy, useClass: NoComponentReuseStrategy },
    DatePipe
  ]
}).catch(err => console.log('path requested ' + err));

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