Angular 17中如何将默认Router类替换为自定义路由类？

要替换Angular 17的默认Router为你写的CustomRouter，需要先修正类的实现，再在配置中覆盖默认提供商，具体步骤如下：

1. 修正自定义Router的实现 #

你的CustomRouter现在有两个小问题需要调整：

• Router的构造函数需要多个依赖注入参数，直接调用super()会触发运行时错误
• handleCategoryChange方法在订阅回调中会丢失this指向，导致无法访问类内部的category属性

修正后的代码：

import {
  Event,
  EventType,
  Router,
  RouterEvent,
  UrlSerializer,
  ChildrenOutletContexts,
  Location,
  Injector,
  RouteReuseStrategy,
  Routes,
  Compiler
} from "@angular/router";
import { filter } from "rxjs";

type Category = "application" | "login" | "settings";
const pageRegexp = /^\/app\/(map|settings|operation)(?:\/|$)/;

export class CustomRouter extends Router {
  private category: { previous: Category | null; current: Category | null } = {
    previous: null,
    current: null,
  };

  constructor(
    rootComponentType: any,
    urlSerializer: UrlSerializer,
    rootContexts: ChildrenOutletContexts,
    location: Location,
    injector: Injector,
    routeReuseStrategy: RouteReuseStrategy,
    config: Routes = [],
    compiler: Compiler | null = null
  ) {
    // 传递所有依赖给父类Router的构造函数
    super(rootComponentType, urlSerializer, rootContexts, location, injector, routeReuseStrategy, config, compiler);

    // 用箭头函数绑定this，确保回调能访问类的内部属性
    this.events
      .pipe(filter((event) => event.type === EventType.NavigationEnd))
      .subscribe((event) => this.handleCategoryChange(event));
  }

  private handleCategoryChange(event: Event) {
    const url = (event as RouterEvent).urlAfterRedirects;
    const match = pageRegexp.exec(url);
    const currentCategory = match ? (match[1] as Category) : null;

    if (currentCategory) {
      this.category.previous = this.category.current;
      this.category.current = currentCategory;
    }
  }

  public getCategory() {
    return { ...this.category }; // 返回副本，避免外部直接修改内部状态
  }
}

2. 在app.config.ts中替换默认Router #

在Angular 17的独立配置里，你需要在providers数组中覆盖Router的默认提供商，让Angular优先使用你的自定义类：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, Router } from '@angular/router';
import { routes } from './app.routes';
import { CustomRouter } from './custom-router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    // 覆盖默认Router提供商，使用自定义的CustomRouter类
    { provide: Router, useClass: CustomRouter }
  ]
};

3. 验证自定义Router是否生效 #

随便找个组件注入Router，检查是否是CustomRouter的实例：

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
import { CustomRouter } from './custom-router';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {
  private router = inject(Router);

  constructor() {
    if (this.router instanceof CustomRouter) {
      console.log('自定义Router已生效');
      // 调用自定义方法测试
      console.log(this.router.getCategory());
    }
  }
}

注意事项 #

• 必须把Router构造函数需要的所有依赖都注入进来，缺少任何一个都会报错
• 处理订阅回调时，要么用箭头函数，要么用bind(this)，否则this会指向订阅上下文而非类实例
• 返回category时建议返回副本，防止外部代码直接修改内部状态，保证数据的可控性

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