Angular 4同组件路由切换时如何实现组件刷新？

嘿，我之前在开发多场景表单组件时也碰到过一模一样的问题——Angular默认会复用同一组件的实例，所以切换路由后组件状态（比如你的预约步骤）不会自动重置。给你几个实用的解决方案，按需选择：

方案一：监听路由变化手动重置状态 #

这是最灵活的方案，不需要修改全局路由策略，只在目标组件内处理即可。

1. 首先确保路由配置中开启runGuardsAndResolvers: 'always'（确保路由变化时能触发监听）：

const routes: Routes = [
  { path: 'booking/industry-a', component: BookingComponent, runGuardsAndResolvers: 'always' },
  { path: 'booking/industry-b', component: BookingComponent, runGuardsAndResolvers: 'always' }
];

2. 在预约组件中订阅路由变化，触发状态重置：

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

export class BookingComponent implements OnInit, OnDestroy {
  currentStep = 1;
  private routeSubscription: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 监听路由URL变化
    this.routeSubscription = this.route.url.subscribe(() => {
      // 重置到第一步
      this.currentStep = 1;
      // 如果用了响应式表单，记得重置表单
      // this.bookingForm.reset();
      // 还可以清空其他相关数据
      // this.bookingData = {};
    });
  }

  ngOnDestroy() {
    // 销毁订阅避免内存泄漏
    this.routeSubscription.unsubscribe();
  }
}

方案二：禁用组件复用（强制重新创建实例） #

如果希望每次切换路由都完全刷新组件，可以自定义一个路由复用策略，禁止复用目标组件。

1. 创建一个NoReuseStrategy类：

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

export class NoReuseStrategy 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 false;
  }
}

2. 在你的预约模块中提供这个策略：

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { NoReuseStrategy } from './no-reuse-strategy';

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

这样每次切换到预约组件的路由时，都会创建新的组件实例，状态自然就重置了。注意：如果组件比较复杂，频繁创建销毁可能有轻微性能影响，但预约表单场景完全没问题。

方案三：用路由参数区分行业（如果适用） #

如果你的路由是用参数区分行业的（比如/booking/:industryType），可以直接监听参数变化来重置状态：

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const industry = params.get('industryType');
    // 当行业参数变化时重置步骤和表单
    this.currentStep = 1;
    this.resetBookingForm();
  });
}

额外提醒 #

如果使用了Angular的响应式表单，不要只重置currentStep变量，记得调用form.reset()或者form.reset({...默认值})来重置表单控件的状态（包括验证状态），避免残留之前的输入数据。

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