Относительные ссылки / частичные маршруты с 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 с этой точки зрения, и я чувствую, что это в любом случае противоречит разделению интересов)?

Ответы на вопрос(3)

Я не знаю, можете ли вы сделать это с [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});
}

/работник
/ Сотрудник /: идентификатор

 user77668609 окт. 2018 г., 09:54
Это нарушит поведение «Открыть в новой вкладке / окне»
 adamdport25 мая 2017 г., 19:38
Это сломалось быrouterLinkActive так далее
 Ervin Llojku26 мая 2017 г., 11:00
@adamdport, какую версию Angular вы используете? Angular сильно изменился с момента моего ответа: D вы можете проверить официальные документы для получения дополнительной информации о маршрутизаторе .. thnx

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

 Günter Zöchbauer26 окт. 2018 г., 20:42
@ Жак Я не понимаю, почему это связано
 Jacques26 окт. 2018 г., 16:33
Старый вопрос / ответ, но я не вижу ничего упомянутого здесь о базовом URL, который понадобится маршрутизатору.
 Jacques30 окт. 2018 г., 07:55
@ GünterZöchbauer разве маршрутизатор не указывает относительные пути вне базового URL?
 PsyGik05 дек. 2017 г., 06:40
Могу подтвердить../ работает и загружает дочерний компонент по текущему маршруту.
 Thorsten Westheider07 июл. 2016 г., 06:42
Ни с./ ни без этого не обойтисьrouterLinkс работой. Они работают один раз после загрузки страницы, но если родительский компонент меняет свою часть URL,href генерируется для компонента с относительнымrouterLink не обновляется и остается на предыдущем маршруте. Смотрите мой репо наgithub.com/erasethis/angular2-routing
 adamdport19 сент. 2018 г., 16:40
@pbarranis "это просто не работает" - без подробностей я не могу вам помочь. Если ваша проблема отличается от ОП, попробуйте воспроизвести в стеке и опубликовать свой вопрос
 Günter Zöchbauer07 июл. 2016 г., 06:45
Я думаю, что нужно Плункер, чтобы воспроизвести и исследоватьangular.io/resources/live-examples/quickstart/ts/plnkr.html У вас есть<base href="/"> как первый элемент внутри<head>?
 adamdport25 мая 2017 г., 19:47
Я думаю, что это относительно маршрута компонента, в которомrouterLink определено. Если я активировал/parent/child/grandchild1 маршрут иrouterLink определяется в/parent компонент (который содержит боковую панель для OP), затем ссылку наgrandchild2 все равно ожидалrouterLink включатьchildнапример[routerLink]="[child, grandchild2]".
 Günter Zöchbauer30 окт. 2018 г., 08:03
Относительные маршруты @Jacques основаны на текущем маршруте, аналогичном текущему рабочему каталогу.../sibling, ../../uncle/cousin, child, Абсолютные маршруты основаны на базовом URL.

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

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

или же

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

Ваш ответ на вопрос