Angular路由复用策略：同一组件用于双路由的实例问题

这是因为Angular默认的DefaultRouteReuseStrategy路由复用策略会复用同一个组件实例——当两个路由配置指向同一个组件类时，切换路由不会触发组件的销毁与重建，而是直接复用已存在的实例，所以文本框的输入状态会被保留下来。这是Angular的性能优化设计，避免频繁创建销毁组件带来的开销。

你可以通过以下几种方式实现两个路由使用同一组件但拥有独立实例/状态：

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

创建一个自定义的路由复用策略，让它对目标路由不进行实例复用：

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } 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 future.routeConfig === curr.routeConfig;
  }
}

然后在AppModule中提供这个策略：

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

2. 创建包装组件 #

为两个路由分别创建不同的组件类，但复用同一个模板文件，这样Angular会认为是不同组件，切换时创建独立实例：

// route1-component-a.ts
import { Component } from '@angular/core';

@Component({
  templateUrl: './componentA.component.html'
})
export class Route1ComponentA {}

// route2-component-a.ts
import { Component } from '@angular/core';

@Component({
  templateUrl: './componentA.component.html'
})
export class Route2ComponentA {}

路由配置中分别使用这两个组件：

const routes: Routes = [
  { path: 'route1', component: Route1ComponentA },
  { path: 'route2', component: Route2ComponentA }
];

3. 组件内维护路由独立状态 #

在组件内部根据当前路由路径/参数，为不同路由存储独立的文本状态：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';

@Component({
  templateUrl: './componentA.component.html'
})
export class ComponentAComponent implements OnInit {
  private textCache: Record<string, string> = {};
  currentText = '';
  private currentRoutePath = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.url.pipe(
      map(segments => segments.join('/'))
    ).subscribe(path => {
      this.currentRoutePath = path;
      // 切换路由时恢复对应路径的文本
      this.currentText = this.textCache[path] || '';
    });
  }

  updateText(text: string): void {
    // 保存当前路由的文本
    this.textCache[this.currentRoutePath] = text;
    this.currentText = text;
  }
}

模板绑定调整为：

<input [(ngModel)]="currentText" (input)="updateText(currentText)">

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