How to reload the component of same URL in Angular 2?

Question

I am trying to reload the same url in Angular 2 by using router.navigate but it is not working. url : http://localhost:3000/landing Scenario : I am on http://localhost:3000/landing and now I am changing a particular parameter in the page which should reload the page.

Code :

let link = ['Landing'];
this.router.navigate(link);

Solution 1

Navigate to some dummy component and then navigate to the component that you want to reload. //the second parameter _skipLocationChange=true to avoid that url in back button

this.router.navigateByUrl('/DummyComponent', true);
this.router.navigate(["Landing"]);

Solution 2

this.router.navigateByUrl('/DummyComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Landing"]));

Comments

[Anish]

Thank you so much ! That really helped.

[Pritesh Acharya]

@Anish You can also mark it as answer since it solved your problem.

[trungk18]

@PriteshAcharya Do you have another way to deal with it, for me it didn't work.

[Jack Rothrock]

@trungk18 I've found that you need to pass in an object, this.router.navigateByUrl('/Dummy', { skipLocationChange: true }) worked for me.

[Sydwell]

I placed the second navigation in a timeout. setTimeout(() => { this.router.navigate(['/Landing']); }, 100);

[Maciej Jureczko]

Why would you copy an existing answer?

[Martijn Pieters]

@MaciejJureczko: doesn't look like the same answer to me.

[Maciej Jureczko]

@MartijnPieters - Well it's not identical but it's a nearly identical copy of the highest scoring answer.

[Martijn Pieters]

@MaciejJureczko so it's not a copy.

[Maciej Jureczko]

@MartinPieters - I don't understand why you're taking this to a lexical level but alright... So... I cannot agree. A copy is usually not identical in most meanings and contexts we can imagine. You can have a bad copy or a good copy. Performing copies usually takes into account errors and imperfections. This is a copy with a slight modification. And last of all, I do not think this matters at all. What matters is the intent. Headbozo either ignored all previous content and wrote his answer or he copied the best answer and modified it. IMO both make this a candidate for removal.

[Gert Arnold]

@MaciejJureczko Well, the differences are pretty essential. It's a promise flow now and see this comment. But then, the missing explanation makes this a low-quality answer anyway.

[Wanjia]

Maciej is right though it's the identical answer to a comment of the answer on Jan 13 '17, a good 7 months before this post

[Jeff Huijsmans]

This was the answer that helped me, though. I forgot using the then.