Angular необязательный языковой параметр на пути родительского маршрута

Question

У меня есть приложение angular, в котором есть URL-адреса нескольких стран, и в каждой стране может быть несколько языков. Основная маршрутизация моего приложения имеет две разные опции

const routes: Routes = [
  {
    path: '',
    loadChildren: './country/country.module#CountryModule'
  },
  {
    path: ':countryCode/:languageCode',
    loadChildren: './views/views.module#ViewsModule'
  },
  {
    path: ':countryCode',
    loadChildren: './views/views.module#ViewsModule'
  }
]

Таким образом, путь root ведет к представлению выбора страны / языка, а два других go - к модулю представлений. Если выбранный язык страны является основным языком, путь содержит только код страны, но если выбранный язык не является первичным языком, languageCode, если он добавлен в URL

Модуль представления также имеет модуль маршрутизации, который перенаправляет на каждое представление

const routes: Routes = [
  {
    path : '',  component: ViewsComponent,
    children : [
      { path: '', component: HomeComponent},
      { path: ':catUrl1/:catUrl2', component: CategoryComponent},
      { path: ':catUrl1', component: CategoryComponent}
    ]
  }
];

Так URL, как my.app.com/us и my.app.com/us/es, показывают домашний компонент. Проблема возникает с компонентом категории. При переходе к категории второго уровня с основными и дополнительными языками, а категория первого уровня с дополнительными языками работает нормально и переходит к компоненту категории, показывая правильные параметры маршрута

my.app.com/us/tv/oled-c1234 -> second level primary lang
my.app.com/us/es/tv/oled-c1234 -> second level secondary lang
my.app.com/us/es/media-c7890 -> first level secondary lang

Проблема возникает с первым категория уровня и основной язык

my.app.com / us / media-c7890

Приложение показывает домашний компонент вместо компонента категории, поскольку последняя часть URL (media-c7890) берется как переменная languageCode вместо catUrl1.

Есть ли способ заставить ее работать так, как я хочу?

демонстрация stackblitz

Через некоторое время В результате дальнейших исследований выясняется, что категории с основным языком вообще не работают, поэтому, когда я пытаюсь достичь категории первого уровня, она соответствует домашнему компоненту, а попытка получить категорию второго уровня соответствует категории первого уровня. Переменная пути catUrl1 берется как languageCode, если не выбран дополнительный язык

Answer 1

Наконец-то я нашел решение с помощью пользовательского сопоставления, поэтому мои основные маршруты:

const routes: Routes = [
  {
    path: '',
    loadChildren: './country/country.module#CountryModule'
  },
  {
    path: CustomURLMatcher.languageMatcher
    loadChildren: './views/views.module#ViewsModule'
  }
]

И мой настраиваемый сопоставитель выглядит так:

export class URLMatcher {
  private isCountryOrLanguage(code: string) {
    return /[a-z]{2})$/.test(code);
  }

  languageMatcher = (url: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route) => {
    if (!url.length) {
      return null;
    }
    if (url[1] && this.isCountryOrLanguage(url[1].path)) {
      const consumed = [url[0], url[1]];
      const posParams = { countryCode: url[0], languageCode: url[1] };
      return { consumed, posParams };
    } else if (!url[1] || (url[1] && !this.isCountryOrLanguage(url[1].path))) {
      const consumed = [url[0]];
      const posParams = { countryCode: url[0] };
      return { consumed, posParams };
    } else {
      return null;
    }
  }
}

export const CustomURLMatcher = new URLMatcher();