Angular header relative routerLink

Issue

I am trying to make a global header in Angular6, with a dynamic list of hyperlinks, which are different for each page. The hyperlinks always reference some page, relative to the current URL. But the routerLink-s do not work relatively in the global header. This means that, when I have a routerlink in the app root header and I try to make relative links to the current, lazy loaded module, which is currently in use and which I have loaded a menu for.

Meaning, if I am on an URL

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

And the global menu holds a hyperlink

<a routerLink="./profile">

Then clicking on that routerLink, will take me to example.com/profile. It acts as an absolute link. Now if, on the same page, I insert the same code into the employee component, which is loaded as the main body, it works differently, in it that it will redirect me to.

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

I do not understand, why wouldn’t it take the global router url state as the relativity base, but instead it tries to route from root, where the header is – in the router tree.

How can I possibly manage global relative menus in the header in Angular, when the relative URL-s do not work correctly there?

Solution

I found an answer a few weeks later.

You are allowed to pass in relativeTo to the router, which helps in these cases. You can forward another components ActivatedRoute and use that as a relativity base.

this._router.navigate(['../../method'], {relativeTo: this._activatedRoute});

Answered By – Karl Johan Vallner

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.