How can I reload the content of component in Angular 2?

Question

At one moment of runtime my url looks like

http://localhost:4200/personal/51c50594-a95c-4a18-ac7b-b0521d67af96

I want to go to a page with only a different GUID and different content.

http://localhost:4200/personal/{otherGuid}

This is not working:

this.router.navigate(['/personal',new_ guid]);

How can I achieve this in angular 2 ?

have you tried relative navigation? `this.router.navigate([new_guid], { relativeTo: this.route });` this might help: https://stackoverflow.com/questions/38634237/how-do-i-navigate-to-a-sibling-route — user7552, Aug 28 '17 at 14:25
Does this help you: https://stackoverflow.com/questions/38836674/how-do-i-re-render-a-component-manually — Vega, Aug 28 '17 at 14:41
@Alexandru-IonutMihai you want to just navigate to the new page with its content right , sorry but i am not able to understand the question can you breif it for me — Rahul Singh, Aug 28 '17 at 14:48
I am on some page with url `http://localhost:4200/personal/51c50594-a95c-4a18-ac7b-b0521d67af96` and page has some content. When i click a button i want to navigate to `http://localhost:4200/personal/{otherGuid}` and also change the content of page based on `guid`. — Mihai Alexandru-Ionut, Aug 28 '17 at 14:49
I think what is not working for him, is that the content is not changing, but the url is. if this is the case, then the link @Vega provided should probably solve this problem. The component has already rendered, and only the `param` has changed. So, you'd only need to subscribe to it and change it accordingly like the answers shown from that link. — user7552, Aug 28 '17 at 14:56
@Alexandru-IonutMihai this might seem hacky but you can call the `destroy` method of the component and then `re-render` — Rahul Singh, Aug 28 '17 at 15:00

Madhu Ranjan · Accepted Answer · 2020-08-31T18:39:41.393

3

try below,

 ....
  this.router.navigate(['personal', id]);
 ....

 constructor(route: ActivatedRoute, router: Router){
  this.route.params.subscribe(param => {
     // this will be fired when you change the guid,
     // use the new param to reload component..
  })
 }

check this Plunker!!

edited Aug 31 '20 at 18:39

answered Aug 28 '17 at 15:07

Madhu Ranjan

17,334
7
60
69

1

Yes, this is also one solution: https://stackoverflow.com/questions/38836674/how-do-i-re-render-a-component-manually. Thanks a lot. – Mihai Alexandru-Ionut Aug 28 '17 at 15:11

score 0 · Answer 2 · answered Aug 28 '17 at 14:42

you can navigate to intermediate route /personal and in that page you can get the parameter and based on parameter again using switch case you can navigate to other route. In the latter part if you don't want to change the route displayed in url bar you can do this by using this code

this.router.navigate(['/view'], { skipLocationChange: true });

skipLocationChange: true Navigates without pushing a new state into history.

for your reference you can check this link

How can I reload the content of component in Angular 2?

2 Answers2