Angular 12中如何让自定义RouteReuseStrategy作为单例供组件访问？

你遇到的核心问题是：同时注册MyRouteReuseStrategy类和{provide: RouteReuseStrategy, useClass: MyRouteReuseStrategy}时，Angular会为这两个独立的提供者创建不同实例——一个供路由内部使用，一个供组件注入调用，导致单例逻辑失效。

可行的单例实现方案 #

通过useExisting提供者配置，让Angular复用同一个实例，无需拆分逻辑到其他服务。具体步骤如下：

1. 配置服务与模块提供者

如果你的MyRouteReuseStrategy使用providedIn: 'root'，调整服务装饰器如下：

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

@Injectable({
  providedIn: 'root',
  useExisting: RouteReuseStrategy
})
export class MyRouteReuseStrategy implements RouteReuseStrategy {
  // 实现RouteReuseStrategy的核心方法
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 你的现有逻辑
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): 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;
  }

  // 新增供组件调用的自定义逻辑
  public clearStoredRoute(routePath: string): void {
    // 示例：清理指定路径的缓存路由
    // 这里实现你的业务逻辑
  }
}

然后在根模块（如AppModule）中仅注册RouteReuseStrategy的提供者：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { MyRouteReuseStrategy } from './my-route-reuse-strategy';

@NgModule({
  imports: [BrowserModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: MyRouteReuseStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 组件中注入使用

在需要调用自定义逻辑的组件中，直接注入MyRouteReuseStrategy即可，此时使用的是路由系统共享的单例实例：

import { Component } from '@angular/core';
import { MyRouteReuseStrategy } from '../my-route-reuse-strategy';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(private routeReuseStrategy: MyRouteReuseStrategy) { }

  handleClearRoute(): void {
    // 调用自定义逻辑
    this.routeReuseStrategy.clearStoredRoute('/dashboard');
  }
}

原理说明 #

useExisting提供者选项告诉Angular：当组件请求注入MyRouteReuseStrategy时，复用已经注册的RouteReuseStrategy实例，避免创建新的对象，从而保证整个应用中只有一个MyRouteReuseStrategy实例，既满足路由系统的需求，又能让组件调用其自定义逻辑。

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