В моем приложении некоторые 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 с этой точки зрения, и я чувствую, что это все равно идет против разделения проблем)?
Это должно сработать. Ведущий / делает его абсолютным путем, без него (или с ./), он становится относительным маршрутом относительно текущего маршрута. Вы также можете использовать ../ (или ../../ или больше) для маршрутизации относительно родителя или родителя.
Я не знаю, можете ли вы это сделать с помощью [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});
}
/наемный рабочий
/Сотрудник/: идентификатор
Вместо того, чтобы использовать "./" или "../", я бы предложил использовать относительный параметр в функции router.navigate. Например:
this.router.navigate(['child'], {relativeTo: this.route});
или же
this.router.navigate(['sibling'], {relativeTo: this.route.parent});