使用UrlHandlingStrategy重定向URL是否合理？有无更优方案？

首先明确：用UrlHandlingStrategy处理Angular与AngularJS混合场景下的哈希路由重定向，是合理的使用场景——这个接口的设计初衷就是为了让Angular路由能和其他路由系统（比如AngularJS的哈希路由）共存，划分各自的URL处理范围。但你当前的实现存在明显问题：在shouldProcessUrl中直接调用location.go修改URL，会触发新的路由导航事件，导致shouldProcessUrl被反复调用，形成循环。

当前代码的核心问题 #

shouldProcessUrl是Angular路由用来判断「当前URL是否由Angular路由系统处理」的钩子，它的返回值决定了后续路由流程是否继续。如果你在这个钩子内部直接修改location，会立刻触发新的Navigation事件，Angular会再次调用shouldProcessUrl，最终导致重复调用的问题。

更优实现方案 #

我们需要分离职责：让UrlHandlingStrategy只负责判断URL的处理范围，把重定向逻辑移到专门的路由事件监听或路由配置中，避免循环触发。

方案1：路由事件监听+UrlHandlingStrategy分工 #

步骤1：修正UrlHandlingStrategy，只做范围判断

export class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
  shouldProcessUrl(urlTree: UrlTree): boolean {
    // 仅让Angular处理指定路径的URL，哈希路由交给后续逻辑处理
    return /^\/(errors|angularIO).*$/.test(urlTree.toString());
  }

  extract(urlTree: UrlTree): UrlTree {
    return urlTree;
  }

  merge(urlTree: UrlTree, _rawUrl: UrlTree): UrlTree {
    return urlTree;
  }
}

步骤2：创建重定向服务，监听路由事件

@Injectable({ providedIn: 'root' })
export class HashRedirectService {
  constructor(private router: Router) {
    this.router.events.pipe(
      // 只监听导航开始事件
      filter(event => event instanceof NavigationStart),
      // 仅处理包含哈希的URL，避免重复触发
      first(event => !!event.url && event.url.includes('#'))
    ).subscribe((event: NavigationStart) => {
      const urlTree = this.router.parseUrl(event.url);
      if (urlTree.fragment) {
        const targetPath = urlTree.fragment.replace(/[#!]/g, '');
        // 使用Router的导航方法，让Angular正确处理路由状态
        this.router.navigateByUrl(`/${targetPath}`).catch(err => console.error('哈希路由重定向失败:', err));
      }
    });
  }
}

步骤3：在模块中配置依赖

@NgModule({
  providers: [
    { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy },
    // 初始化重定向服务，确保应用启动时就监听路由事件
    {
      provide: APP_INITIALIZER,
      useFactory: (redirectService: HashRedirectService) => () => redirectService,
      deps: [HashRedirectService],
      multi: true
    }
  ]
})
export class AppModule {}

方案2：路由配置匹配器（更简洁） #

如果不需要复杂的混合路由逻辑，可以直接在路由配置中使用自定义匹配器处理哈希重定向：

const routes: Routes = [
  // 处理哈希路由重定向
  {
    matcher: (urlSegments) => {
      // 当当前URL为空但存在哈希时，触发重定向
      if (urlSegments.length === 0 && window.location.hash) {
        const targetPath = window.location.hash.replace(/[#!]/g, '');
        return { consumed: [], redirectTo: `/${targetPath}` };
      }
      return null;
    },
    redirectTo: ''
  },
  // 你的其他路由配置
  { path: 'errors/**', component: ErrorsComponent },
  { path: 'angularIO/**', component: AngularIOComponent }
];

这种方式不需要额外实现UrlHandlingStrategy，直接通过路由配置完成重定向，更符合Angular路由的设计思路。

总结 #

• 使用UrlHandlingStrategy处理混合路由场景是合理的，但绝对不要在shouldProcessUrl中直接修改location，这会触发路由循环。
• 更优的实现核心是分离职责：让URL范围判断和重定向逻辑各自独立，避免钩子内部触发新的路由事件。

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