Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Refresh component after doing a router.navigate

I am trying to navigate from one component to another component using :

this.router.navigate(['/path/'], '_blank');

The problem is that the component I am navigating to, is already created and its ngOnInit method is not executed when I navigate back to the page. I am trying to refresh the data showing on the page. This is in the ngOnInit function of the target component:

this.sub = this._DataService.getData().subscribe(data=> {
        this.data= data;
    });

How can I tell the target component, that the data on the page is always refreshed when doing a navigation?

I am using Ag-Grid to show the data in a table. In the NgOnInit function:

this.gridOptions.rowData = this.data;

The component I am originally coming from, is a form to add a new object. After submitting that object, it should redirect to the grid and show the new object. That is why the Grid should be updating its data, but because of some reason, it only does that when I manually refresh it through a context menu action in the grid, not on navigation.

The submit function in the form looks as the following:

 onSubmit(data) {
    this._DataService.addData(data.value).subscribe();
    this.router.navigate(['/data/']);
}
like image 759
merlino Avatar asked Mar 10 '17 11:03

merlino


People also ask

Does router navigate reload the page?

Does the page reload when we navigate to another route in react? react-router-dom allows us to navigate through different pages on our app with/without refreshing the entire component. By default, BrowserRouter in react-router-dom will not refresh the entire page.

How does router navigate work?

Angular router traverses the URL tree and matches the URL segments against the paths configured in the router configuration. If a URL segment matches the path of a route, the route's child routes are matched against the remaining URL segments until all URL segments are matched.

How do I reload components in Angular 9?

In the component, we have written 2 methods: reloadComponent() to reload another component or the current route and reloadPage() to reload the entire application. The reloadPage() is self-explanatory.


1 Answers

If you navigate to the same route and only parameter values change, move the initialization code out from constructor and call it from constructor and when route params change:

constructor(private route:ActivatedRoute) {
  route.params.subscribe(val => this.initialize())
}
like image 67
Günter Zöchbauer Avatar answered Oct 03 '22 20:10

Günter Zöchbauer