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/']);
}
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.
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.
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.
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())
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With