Angular 2 route with parameters re-initializing component onInit

Question

I have an issue where my component is re-initializing when I route to it with new parameters. Here are my routes.

const appRoutes: Routes = [
  { path: \'\'         


        

Answer 1

Routing back to the component with parameters re-initializes the component and repeats the service call.

That is because the new route where you go is specified as a different route in your application. For the component not to be reinitialized, it has to be the same route.

I see different possibilities here, depending on your specific scenario:

If you only load /tiles to make a service call and then route to tiles/:master/:filters, but /tiles component doesn't make sense without receiving this data, you could consider using a resolver to make the API call, and then having only tiles/:master/:filters route.

From the official docs, you can do the service call inside the resolver:

@Injectable()
export class MasterFiltersResolver implements Resolve<MasterFilter> {
  constructor(private cs: MasterFiltersService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
    let id = route.params['id'];
    return this.cs.getData(id).then(data => {
      if (data) {
        return data;
      }
    });
  }
}

Then in your route you can specify it as:

{ path: '', component: MyNewComponentComponent },
{ path: 'tiles/:master/:filters', component: DisplayTileData, 
    resolve: {
        masterFilters: MasterFilterResolver
    } 
} 

This way, it will retrieve the data you need before loading your component.

If your /tiles route component makes sense as a standalone component without master and filters data:

In this case, you can use optional parameters.

When having optional parameters, you would have only this route on your route definition

{ path: '', component: MyNewComponentComponent },
{ path: 'tiles', component: DisplayTileData }

And then navigating to this route through router.navigate('/tiles', {master: '', filter: ''}.

In this case, your component will need something like:

constructor(private route: ActivatedRoute) {}

this.route.params.subscribe(params => {
  // do something
});

this.route.params is an observable of params, so you can be reactive to any change to do async operations.

Answer 2

I used a different approach, listening to the Activated route in my Component

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

constructor(
private route: ActivatedRoute
) {
  this.route.url.subscribe(url =>{
      /* Your function*/
  });
}