Different routes same component

Question

I want to achieve something like this /products shows all the products and /products/:category shows all the products related to a specific category. To achieve that I have the following routes:

const productsRoutes: Routes = [   {     path: 'products',     component: ProductsComponent,     children: [       {         path: '',         component: ProductsListComponent,       },       {         path: ':category',         component: ProductsListComponent       }     ]   } ]; 

Problem

When I switch between categories, everything is fine, when I switch between all products and category products, and vice-versa, Angular redraws the components and there's a flickering.

Angular 2 Router final version doesn't have Regex,as for as I know. Is there something that I'm missing, or for now this is the only solution?

Answer 1

you can solve it by adding routes

const routes: Routes = [     { path: 'experience',         children: [             { path: 'pending', component: ExperienceComponent },             { path: 'requests', component: ExperienceComponent },         ] }] 

and in ExperienceComponent import

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

and in constructor add this parameter

constructor(public route: ActivatedRoute) 

and inside constructor get url

this.route.url.subscribe(params => {   console.log(params[0].path); })