Search code examples
angulardifferencerouterlink

routerlink and router.navigate

I was reading that routerlink implicitly calls relativeTo whereas this.router.navigate doesn't.

Knowing this info, I still can't seem to make the below work.

The routerlink works and gives me the following address:

http://localhost/main/(aux:crypto/5a599f35af967b0017d1be6f/blogoutlet:steemblog:)

But:

 this.router.navigate([{outlets: { 'blogoutlet' : ['steemblog']}}])

only gives:

http://localhost/main/(aux:crypto/5a599f35af967b0017d1be6f)

Everytime I am trying to change these paths I struggle to understand what is going on and it takes me ages to work it out. Is there a simple rule to it that I can follow?

Solution

  • [routerLink] can be used in html for or elements. This will navigate to the path created with params given to routerLink.

    this.router.navigate(['/detail', this.selectedHero.id]);

    is used in your component.ts or services to navigate to particular component provideed in path.