У меня есть такой макет:
<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 и сделаю именованный маршрут дочерним по отношению к основному маршруту, тогда это сработает. Но это не то, чего я хочу.
Поверьте, проблема в том, что вы не указали первое значение пути в массиве [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>
пустая строка в качестве первого значения решила проблему. благодаря тонну! Я уже сходил с ума.