CODEWITHSUNDEEP
javascriptangularangular2-routing
user2999287
user2999287

Reputation:

Angular 2 router when navigate to another url not reseting the outlet

I have route with another outlet called compose, for example:

<a [routerLink]="[{outlets: {primary: 'about', compose: 'new-message'}}]">About with compose</a>

When I clicking on the link the URL is:

http://localhost:4200/about(compose:new-message)

That's fine, but when I clicking on this:

<a routerLinkActive="active" [routerLink]="['/home']">Home</a>

The URL is still with the outlet:

http://localhost:4200/home(compose:new-message)

The solution I found is to reset the outlet like this:

 <a [routerLink]="[{outlets: {primary: 'home', compose: null}}]">Home</a>

But this is so verbose and annoying, because I will need do this in every link, There is a better way?

Upvotes: 2

Views: 1031

Answers (1)

jigar gala
jigar gala

Reputation: 1650

When you use [routerlink] it generates href dynamically on the basis of every URL change.

You can work on this as below:

//url = '/home' in ur case
<a (click)='changeRoute(url)'></a>

In your component add below function.

routChange(url){
   this.router.navigateByUrl(url);
}

Upvotes: 1

Related Questions