How do I close the route popup before moving to the next location? (Angular 2)

Question

I show a series of items that you can click to go to the next route. You can also click the popup on this page. If you click on the popup, then click on one of the elements that I would like to destroy the popup before displaying the next route.

onSelect(id) { if (this.router.url.includes('popup')) { let p = Promise.resolve(() => this.closePopup()) p.then(() => this.router.navigate(['/', id])) } else { this.router.navigate(['/', id]) } } closePopup() { this.router.navigate([{outlets: {popup: null}}]) } 

I really don't understand promises, so I'm not sure I wrote it in the correct structure, but this code does not work, since it will always move along the next route with a pop-up window inside the URL. I tried to do this in the same structure beyond the promise, but it will always go to: id with (popup) still in the url.

I also tried: this.router.navigate(['/', id, {outlets: {popup: null}}]) .

Is there a function inside the router that allows absolute rewriting of the URL? Or is there a way to make sure it removes the popup from the URL before going to: id.

The problem of hope is understandable - help is much appreciated!

Answer 1

There is an error report filed on GitHub about this behavior.

Accordingly, this.router.navigate([{ outlets: { popup: null } }); must work.

But you can also explicitly set the URL through this.router.navigateByUrl('/') , which should disable any point names.

Follow the GitHub issue as it has recently been added to the backlog and may soon be fixed in the next version of Angular.

Alternatively, you can find another possible workaround in this problem :

 this.router.navigate([this.route.parent.snapshot.params, {outlets: {popup: null}}]);