Перейдите к маршруту верхнего уровня в именованном маршрутизаторе из вложенных компонентов

У меня есть такой макет:

<div>
  <router-outlet />
  
  <div class = "details">
    <router-outlet name = "details"></router-outlet>
  </div>

</div>

В маршрутах на верхнем уровне у меня есть:

routes = [
  {
    path: 'some-component',
    component: SomeComponent,
  },
  {
    path: 'my-details',
    component: DetailsComponent,
    outlet: 'details'
  }
]

Теперь, когда я перехожу к маршруту «некоторые компоненты», в его шаблоне есть [routerLink]. Я хочу, чтобы эта ссылка на маршрутизатор запускала маршрут «мои данные» в розетке маршрутизатора details.

У меня есть:

[routerLink] = "[{outlets:{details:['my-details']}}]"

но нажатие на него не выбирает маршрут. Пишет, что не найден (у меня есть маршрут для выбора всех несовпадающих маршрутов).

Похоже, что компоненты, отображаемые в розетке основного маршрутизатора, не могут запускать маршрут в указанном маршрутизаторе, если он находится на том же уровне, что и основной маршрутизатор. Я попробовал поставить [relativeTo] = "route.parent" в routerLink, но все равно не работает.

Что мне не хватает?

ПС. Если я помещу именованный маршрутизатор в SomeComponent и сделаю именованный маршрут дочерним по отношению к основному маршруту, тогда это сработает. Но это не то, чего я хочу.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поверьте, проблема в том, что вы не указали первое значение пути в массиве [routerLink], по умолчанию будет использоваться текущий маршрут. Таким образом, он отображает элемент <a> как:

<a href = "<Domain URL>/some-component/some-component(details:my-details)></a>

Поскольку ваш маршрут «my-details» не является дочерним маршрутом для «some-Components», он не сможет соответствовать ни одному маршруту.

Вы должны указать пустую строку или «/» в первом значении массива для [routerLink].

<a [routerLink] = "['', {outlets:{details:['my-details']}}]">Details</a>

Это отобразит элемент <a> как:

<a href = "<Domain URL>/some-component(details:my-details)></a>

Я считаю, что с [relativeTo] тоже работает:

<a [routerLink] = "[{outlets:{details:['my-details']}}]" 
  [relativeTo] = "route.parent">Details</a>

Демо @ StackBlitz

пустая строка в качестве первого значения решила проблему. благодаря тонну! Я уже сходил с ума.

tlzg 23.04.2024 18:15

Другие вопросы по теме