Угловой заголовок относительно routerLink

Я пытаюсь создать глобальный заголовок в Angular6 с динамическим списком гиперссылок, которые различны для каждой страницы. Гиперссылки всегда ссылаются на какую-то страницу относительно текущего URL. Но routerLink-s относительно не работают в глобальном заголовке. Это означает, что когда у меня есть ссылка на маршрутизатор в корневом заголовке приложения, и я пытаюсь создать относительные ссылки на текущий, ленивый загруженный модуль, который в настоящее время используется и для которого я загрузил меню.

Это означает, что если я нахожусь на URL-адресе

http://example.com/company/8/employee

А в глобальном меню есть гиперссылка

<a routerLink="./profile">

Затем, нажав на эту ссылку routerLink, я перейду на example.com/profile. Он действует как абсолютная ссылка. Теперь, если на той же странице я вставляю тот же код в компонент сотрудника, который загружается в качестве основного тела, он работает по-другому, в нем он будет перенаправлять меня.

http://example.com/company/8/employee/profile

Я не понимаю, почему бы ему не взять глобальное состояние URL-адреса маршрутизатора в качестве основы относительности, а вместо этого он пытается маршрутизировать из корня, где заголовок - в дереве маршрутизатора.

Как я могу управлять глобальными относительными меню в заголовке в Angular, если относительные URL-адреса там работают некорректно?


angular angular-routing angular6 angular-router angular5
person Karl Johan Vallner    schedule 10.09.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Поскольку ./ является префиксом routerLink, он будет рассматривать текущий URL как основу для своего перенаправления.

./ - это не что иное, как относительный путь, поэтому, если вы поместите <a routerLink="./profile"> в app.component, он будет перенаправлен на example.com/profile, а если вы поместите ту же ссылку в employee.component, он будет перенаправлен на http://example.com/company/8/employee/profile

Если вам нужно абсолютное перенаправление пути, просто добавьте / (например: <a routerLink="/profile">), чтобы независимо от компонента он перенаправлялся на example.com/profile

person codeninja.sj    schedule 10.09.2018
comment
Мне нужно перенаправление относительного пути в заголовке относительно того, что «employee.component», иначе. конечный URL-адрес. Ака. Мне нужны ссылки routerLink =. / Profile, чтобы указать на example.com/company/8 / employee / profile, а не example.com/profile. Я мог бы передать полные абсолютные URL-адреса в заголовок, чтобы они отображались там, но это просто кажется ненужным, если бы я мог просто сделать ссылки заголовка относительно конечного URL-адреса (employee.component, а не app.component). - person Karl Johan Vallner; 10.09.2018
comment
Вы можете использовать относительный URL только тогда, когда ваш шаблон html находится внутри employee.component.html; поскольку вы упомянули его глобальный, я предлагаю вам использовать абсолютный URL. - person codeninja.sj; 11.09.2018
comment
Возможно, добавьте к своему ответу компонент относительности, чтобы другие могли его увидеть. - person Karl Johan Vallner; 17.09.2018

arrow_upward
1
arrow_downward

Я нашел ответ через несколько недель.

Вам разрешено передавать значение relativeTo маршрутизатору, что помогает в этих случаях. Вы можете перенаправить другие компоненты ActivatedRoute и использовать их в качестве основы для теории относительности.

this._router.navigate(['../../method'], {relativeTo: this._activatedRoute});
person Karl Johan Vallner    schedule 17.10.2018
comment
Мне нравится ваш вопрос, я хотел задать его сам, но нашел ваш. На данный момент я могу придумать только ваше решение. У меня действительно такой вопрос - можем ли мы сделать это в шаблоне только с помощью routerLink (без использования машинописного текста в файле component.ts)? - person benshabatnoam; 08.06.2020
comment
Да, ты можешь. Сделайте _router общедоступным в конструкторе и то же самое с _activatedRoute. Окончательное решение будет выглядеть примерно так (click) = _ router.navigate (['../../ method'], {relativeTo: _activatedRoute}) - person Karl Johan Vallner; 19.06.2020