Refresh router on component.ts

Question

I want to reload my page route to refresh data stored in it. I can do this with putting routerLink on html but is there away that I can make this into a function in ts file? I have found location.reload and location.href but they refresh the whole page.

Code to retrieve message

receiveMessage(){
this.angularFiremessaging.messages.subscribe(
(payload) => {
console.log("new message received. ", payload);
this.currentMessage.next(payload);
});
}

My html

{{ (message | async)?.notification.title }}
{{ (message | async)?.notification.body}}

What kinda data you mean exactly you'd like to retrieve from router link, params? — aelagawy, Mar 07 '20 at 14:20
Why to refresh all the page and not update the specific data? — Baruch Mashasha, Mar 07 '20 at 14:54
That's what I'm trying to avoid. I don't want to refresh the whole page. I just want my router to be reloaded so my html element can be updated. — , Mar 07 '20 at 15:01
@WebDeveloper What I'm trying to do is reload a route. For example, clicking on the home option of a menu when you are already viewing the homepage would refresh the homepage. — , Mar 07 '20 at 15:04

score 0 · Answer 1 · answered Mar 07 '20 at 14:24

0

If you mean params, you could use the ActivatedRoute for this purpose

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute)

ngOnInit() {
   this.route.params.subscribe(params => {
      //will be fired on every param change in the url
      console.log('here are your params: ', params);
   });
}

answered Mar 07 '20 at 14:24

aelagawy

557
5
16

Some sort like that. I'm working on a firebase push notification and I want my notify to be displayed in foreground automatically everytime I push it. The problem is that I have to reload my router for they to show up. I'm very appreciate your help but this does not solve my problem. – Mar 07 '20 at 14:31
Okay, It's much better to share some code to define where the problem exactly is, would you ? – aelagawy Mar 07 '20 at 14:32

score 0 · Answer 2 · answered Mar 07 '20 at 15:10

0

Try this:

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
});

Reference: How to Refresh a Component in Angular

answered Mar 07 '20 at 15:10

Baruch Mashasha

951
1
11
29

Excuse me sir. Can you explain to me what is RefreshComponent? You just made up, put some randomly component in there? – Mar 07 '20 at 15:22
"This can be achieved via a hack, Navigate to some sample component and then navigate to the component that you want to reload." – Baruch Mashasha Mar 07 '20 at 15:26
Thank you. One more question sir. I don't know what is this.router is either. It's something you implement from import a service? Like ActiveRouter or Router? – Mar 07 '20 at 16:09
Yes you need to import router from angular constructor(private router:Router ) { } – Baruch Mashasha Mar 07 '20 at 16:43

Refresh router on component.ts

2 Answers2