Относительные ссылки/частичные маршруты с routerLink

В моем приложении некоторые URL-адреса принимают форму

/department/:dep/employee/:emp/contacts

На боковой панели я показываю список всех сотрудников, каждый из которых имеет [routerLink] который связывается с контактами этого сотрудника

<ul>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 1, 'contacts']"></a>
    <li>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 2, 'contacts']"></a>
    <li>
    ...
</ul>

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

<a [routerLink]="['employee', 2, 'contacts']"></a>

(без части department, потому что я не очень забочусь о department с этой точки зрения, и я чувствую, что это все равно идет против разделения проблем)?

Ответ 1

Это должно сработать. Ведущий / делает его абсолютным путем, без него (или с ./), он становится относительным маршрутом относительно текущего маршрута. Вы также можете использовать ../ (или ../../ или больше) для маршрутизации относительно родителя или родителя.

Ответ 2

Я не знаю, можете ли вы это сделать с помощью [routerLink], но вы можете сделать это так.
Посмотреть

<ul>
    <li>
        <a (click)="onViewDetails(id)">Details</a>
    <li>
    ...

Компонент

construct( private router: Router, private route: ActivatedRoute ){
}
onViewDetails(id){
 this.router.navigate([id], {relativeTo: this.route});
}

/наемный рабочий
/Сотрудник/: идентификатор

Ответ 3

Вместо того, чтобы использовать "./" или "../", я бы предложил использовать относительный параметр в функции router.navigate. Например:

this.router.navigate(['child'], {relativeTo: this.route});

или же

this.router.navigate(['sibling'], {relativeTo: this.route.parent});