Refresh component after doing a router.navigate

merlino picture merlino · Mar 10, 2017 · Viewed 14.3k times · Source

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/']);
}

Answer

Günter Zöchbauer picture Günter Zöchbauer · Mar 10, 2017

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())
}