Angular 9中如何向路由匹配器函数传递参数？

在Angular 9里，UrlMatcher的API确实做了类型上的严格规范调整，你遇到的问题核心是要让匹配器既能接收自定义参数，又符合Angular 9对UrlMatcher的类型要求。

原来Angular 8里用箭头函数(url) => matcherHelper(url, 'xxx')的方式，本质是手动给匹配函数套了一层来传递参数，但在Angular 9里，我们可以用高阶函数的方式更优雅地实现需求，同时满足类型规范。

修改你的匹配器辅助函数 #

把matcherHelper改成一个高阶函数：先接收你的自定义参数，再返回一个符合UrlMatcher类型的函数（这个函数会自动接收Angular传入的UrlSegment[]等参数），利用闭包特性保留你的自定义参数：

export function matcherHelper(providerParam: string) {
  // 返回符合UrlMatcher类型的函数，闭包保存自定义参数
  return (segments: UrlSegment[], group: UrlSegmentGroup, route: Route): UrlMatchResult | null => {
    // 这里写入你原来的匹配逻辑，现在可以直接使用providerParam了
    // 举个示例逻辑，你可以替换成自己的业务代码：
    if (segments.length === 1 && segments[0].path === providerParam) {
      return {
        consumed: segments
      };
    }
    return null;
  };
}

路由配置写法 #

现在你就可以按照Angular 9的方式直接配置路由，自定义参数会被正确传递：

{ 
  matcher: matcherHelper('xxx'), 
  loadChildren: () => import('./xxx/auth.module').then(m => m.AuthModule), 
}

为什么这样可行？ #

Angular 9中UrlMatcher的类型定义是：

type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => UrlMatchResult | null;

当你调用matcherHelper('xxx')时，它返回的正是这个类型的函数，Angular会自动把segments、group、route这三个参数传入返回的函数中，而你的自定义参数providerParam则通过闭包被保留下来，供匹配逻辑使用。

这种方式比Angular 8的箭头函数写法更符合TypeScript的类型规范，也更易于代码维护。

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