Angular router: (TAB like) navigate - how to change URL without running ngOnInit again

Question

OK, the question is simple, but don't seem to find the answer myself, so please help

I have this routes (simplified):

const routes: Routes = [
  {path: '', component: ListPageComponent},
  {path: 'd/:id', component: DetailsPageComponent},
  {path: ':param1', component: ListPageComponent},
  {path: ':param1/:param2', component: ListPageComponent},
  {path: ':param1/:param2/:param3', component: ListPageComponent},
  {path: '**', component: ListPageComponent}
];

On the ListPageComponent I have some select box filters on top, that trigger onFilter method (simplified):

onFilter(filters: any) {
  this._router.navigate([
    'myroute/',
    this.param1,
    this.param2,
    this.param3
  ]);
}

Now, what I would like is when I trigger this method, and I navigate (to the same page component), I don't want the component to run ngOnInit again... just to change the URL params (I am already subscribed to params change - this._route.params.subscribe)

Did you try navigating relatively to the ActivatedRoute? I think that shouldn't reload your component but I'm not that sure, since I've only done it with queryParams. — Osman Cea
– Osman Cea, Commented Dec 18, 2017 at 20:13
Btw, looking at your routes and since you're using some kind of form element, I think you should be better off with queryParams instead. — Osman Cea
– Osman Cea, Commented Dec 18, 2017 at 20:19
@OsmanCea is right. With router params you will have different component for each route - so you can have the same component only if previous route has the same shape. But with queryParams you can describe everything with one route = one component initialization. — Pavel Agarkov
– Pavel Agarkov, Commented Dec 18, 2017 at 20:23
well, they have to be different routes like /myroute/param1/param2/... — Demiro-FE-Architect
– Demiro-FE-Architect, Commented Dec 19, 2017 at 6:45

Demiro-FE-Architect · Accepted Answer · 2017-12-19 06:52:22Z

3

I finally found the solution: Change route params without reloading in angular 2

it is possible just to use location.replaceState, works like a charm in my case!

answered Dec 19, 2017 at 6:52

Demiro-FE-Architect

3,74114 gold badges56 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular router: (TAB like) navigate - how to change URL without running ngOnInit again

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related