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

Question

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?

Answer 1

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);
}