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

Answer 2

I don't know if there is another way to do this but I managed to make it work using the following hack.

export const productsRoutes: Route[] = [
    {
        path: 'products',
        component: ProductsComponent,
        children: [
            {
                path: '',
                pathMatch: 'prefix',
                component: ProductsListComponent,
                children: [
                    {
                        path: '',
                        component: EmptyComponent,
                    },
                    {
                        path: ':category',
                        component: EmptyComponent,
                    },
                ],
            },
        ],
    },
];

EmptyComponent:

import { Component } from '@angular/core';

@Component({
    selector: 'GemainEmpty',
    template: '<router-outlet></router-outlet>',
})
export class EmptyComponent {
}

Handle route changes on the ListComponent:

ngOnInit() {
    this.routerEventsSubscription = this.router.events.subscribe((evt) => {
        if (!(evt instanceof NavigationEnd)) {
            return;
        }
        //Code to reload/filter list
    }
}

And add a router outlet on the ListComponent template.

Answer 3

You could also define a redirect to a specific path:

{ path: '**', redirectTo: '/home', pathMatch: 'full' },

where /home is the route you want to redirect to.

path: '**' resolves all paths which are not defined

Answer 4

You can solve it by using redirect,

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

It's more like set one path default, unless there is a matching path.