How do you implement custom routing strategies by extending RouteReuseStrategy?

import { ApplicationConfig, Component, Injectable, OnDestroy, inject, signal } from "@angular/core";
import {
  ActivatedRouteSnapshot, BaseRouteReuseStrategy, DetachedRouteHandle, Router, RouteReuseStrategy,
  RouterOutlet, provideRouter,
} from "@angular/router";

let listCreated = 0;
let detailCreated = 0;

@Component({
  selector: "app-list",
  template: `<input [value]="search()" (input)="search.set($any($event.target).value)" /><p>list #{{ id }} search="{{ search() }}"</p>`,
})
export class ListComponent implements OnDestroy {
  id = ++listCreated;
  search = signal("");
  constructor() { console.log(`  ListComponent constructor (#${this.id})`); }
  ngOnDestroy() { console.log(`  ListComponent destroyed (#${this.id})`); }
}

@Component({ selector: "app-detail", template: `<p>detail #{{ id }}</p>` })
export class DetailComponent implements OnDestroy {
  id = ++detailCreated;
  constructor() { console.log(`  DetailComponent constructor (#${this.id})`); }
  ngOnDestroy() { console.log(`  DetailComponent destroyed (#${this.id})`); }
}

// Keep-alive for routes marked data: { keepAlive: true }. Everything else
// behaves exactly like the default (BaseRouteReuseStrategy).
@Injectable()
export class KeepAliveStrategy extends BaseRouteReuseStrategy {
  private stored = new Map<string, DetachedRouteHandle>();
  private key(route: ActivatedRouteSnapshot) {
    return route.pathFromRoot.map((r) => r.routeConfig?.path ?? "").join("/");
  }

  // Leaving a route: should its component tree be kept instead of destroyed?
  override shouldDetach(route: ActivatedRouteSnapshot) {
    return route.data["keepAlive"] === true;
  }
  override store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null) {
    console.log(`  store("${this.key(route)}", ${handle ? "handle" : "null"})`);
    if (handle) this.stored.set(this.key(route), handle);
    else this.stored.delete(this.key(route));
  }
  // Entering a route: do we have a kept tree to put back?
  override shouldAttach(route: ActivatedRouteSnapshot) {
    return this.stored.has(this.key(route));
  }
  override retrieve(route: ActivatedRouteSnapshot) {
    return this.stored.get(this.key(route)) ?? null;
  }
  // shouldReuseRoute is inherited: same route config means reuse the live instance.
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter([
      { path: "products", component: ListComponent, data: { keepAlive: true } },
      { path: "products/:id", component: DetailComponent },
    ]),
    { provide: RouteReuseStrategy, useClass: KeepAliveStrategy },
  ],
};

@Component({
  selector: "app-root",
  imports: [RouterOutlet],
  template: `<router-outlet (attach)="log('attach')" (detach)="log('detach')" />`,
})
export class AppComponent {
  readonly router = inject(Router);
  log(e: string) { console.log(`  outlet (${e}) event`); }
}