Search code examples
angularrouterlink

Force RouterLink not to change href in Angular 2

I have multiple named outlets and routerLinks to provide outlets with other conponents in the Angular2 component.

<p><a [routerLink]="['1/1', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]"> Provide outlets 1/1</a></p>
<p><a [routerLink]="['1/2', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]"> Provide outlets 1/2</a></p>
<p><a [routerLink]="['1/3', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]"> Provide outlets 1/3</a></p>

<div class="flex-container">
    <div class="flex-item"><router-outlet></router-outlet></div>
    <div class="flex-item"><router-outlet name="articlesOutlet1"></router-outlet></div>
    <div class="flex-item"><router-outlet name="articlesOutlet2"></router-outlet></div>
</div>

When application starts the first link's href becаme

/articles/1/1/(articlesOutlet1:article//articlesOutlet2:news)

After clicking this link, its href became

/articles/1/1/(1/1/(articlesOutlet1:article//articlesOutlet2:news)//articlesOutlet1:article//articlesOutlet2:news)

It's a bad link. I don't want a href to be changed. How to achieve?

Full example here http://plnkr.co/edit/EJOANe?p=preview

Solution

  • If specify routerLink like:

    [routerLink]="['/articles/1/1', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]

    everything is working as expected.