Угловой маршрутизатор: игнорировать косые черты в параметрах пути

Question

У меня есть динамические маршруты, которые могут содержать косую черту или анти-косую черту внутри параметров, например:

http://localhost:4200/dashboard/T64/27D Я должен перейти на страницу с маршрутом T64/27D

Вот как я перемещаюсь this.router.navigate(['dashboard/'+this.groupListPage[0].code]); this.groupList[0].code содержит T64/27D

Фактически Угловое разделение T64 и 27D как 2 разные страницы.

Вот ошибка:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'
Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'

Как я могу сказать Angular, что / является частью параметра?

Answer 1

Я не думаю, что это возможно сделать с помощью pathparams.Он отлично работает с запросами, хотя.

Вы также можете попытаться избежать косой черты с помощью% 2F, но я не уверен на 100%, насколько угловым будет это воспринимать / анализировать.

Answer 2

Предполагая маршрут:

{
    path: 'dashboard/:id',
    component: FooComponent
 }

И: id может существовать в {'abc', 'ab / c'}, чтобы рассматривать внутренний '/' как часть пути, вынеобходимо использовать пользовательский UrlMatcher :

const customMatcher: UrlMatcher = (
  segments: UrlSegment[],
  group: UrlSegmentGroup,
  route: Route
): UrlMatchResult => {
  const { length } = segments;
  const firstSegment = segments[0];
  if (firstSegment.path === "dashboard" && length === 2 || length === 3) {
    // candidate for match
    const idSegments = segments
      .slice(1); // skip prefix
    const idPaths = idSegments.map(segment => segment.path);
    const mergedId = idPaths.join('/');// merge the splitted Id back together
    const idSegment: UrlSegment = new UrlSegment(mergedId, { id: mergedId });
    return ({ consumed: segments, posParams: { id: idSegment } });
  }
  return null;
};

Рабочий пример можно найти в этом блице

Answer 3

  You must define it in your routes.
  //if two param
  {
    path: 'dashboard/:id1/:id2',
    component: yourComponent
  }
  //if only one param
 {
     path: 'dashboard/:id1',
     component: yourComponent
 }
 {
     path: 'dashboard',
     component: yourComponent
 }
 and then navigate to your path
 this.router.navigate(['dashboard/'+this.groupListPage[0].code]);