如何在 Angular 中创建参数在 X 个可能值范围内的路线

Question

我正在尝试在 Angular 中创建一条路线，其中参数在 X 个可能的值范围内。我正在路线中使用匹配器进行尝试：

{
    path: '',
    component: DefaultComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: CountryLandingComponent,
        pathMatch: 'full',
      },
      {
        matcher: (url) => {
          if (url.length > 0 && (Object.values(COUNTRIES_SLUGS) as string[]).includes(url[0].path.toLowerCase())) {
            return {consumed: url, posParams: {[COUNTRY_SLUG_PARAM]: new UrlSegment(url[0].path, {})}};
          }

          return null;
        },
        component: CountryProviderComponent,
        children: [
          {
            path: '',
            component: SearchIndexPage,
            pathMatch: 'full',
          },
          {
            path: 'houses',
            loadChildren: () =>
              import('../modules/houses/houses.module').then((m) => m.HousesModule),
          },
          {
            path: 'outing',
            loadChildren: () =>
              import('../modules/outing/outing.module').then((m) => m.OutingModule),
          },

....

export enum COUNTRIES_SLUGS {
  country1 = 'country1',
  country2 = 'country2'
}

export const COUNTRY_SLUG_PARAM = 'country-slug';

但是，像

https://platform.docker.vm:4201/country1/houses/924/view

这样的路由没有被激活，并且它们在不使用路由匹配器的情况下被很好地激活。有人可以帮助我吗？

Answer 1

我在 Stackblitz 上创建了一个小应用程序，它使用路由匹配器演示了类似的场景。希望您觉得它有帮助。

也许差异在于匹配器返回值的

consumed

部分。您应该仅包含已消耗的段 -

url[0]

，以便算法可以继续休息。像这样：

    return { consumed: url[0], ... };

有一个很好的博客，关于路线，其中包含解释和示例，包括路线匹配器。