Различные маршруты одного и того же компонента

Я хочу добиться чего-то вроде этого /products показывает все продукты и /products/:category показывает все продукты, относящиеся к определенной категории. Для этого у меня есть следующие маршруты:

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

Проблема

Когда я переключаюсь между категориями, все нормально, когда я переключаюсь между всеми продуктами и категориями продуктов, и наоборот, Angular перерисовывает компоненты и там мерцает.

Angular 2 В окончательной версии маршрутизатора нет регулярного выражения, как я знаю. Есть ли что-то, что мне не хватает, или пока это единственное решение?

Ответ 1

вы можете решить это, добавив маршруты

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

и при импорте ExperienceComponent

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

и в конструкторе добавьте этот параметр

constructor(public route: ActivatedRoute)

и внутри конструктора получить url

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

Ответ 2

Я не знаю, есть ли другой способ сделать это, но мне удалось заставить его работать, используя следующий хак.

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 {
}

Обработать изменения маршрута в ListComponent:

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

И добавьте розетку маршрутизатора в шаблон ListComponent.

Ответ 3

Вы также можете определить перенаправление на определенный путь:

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

где /home - маршрут, к которому вы хотите перенаправить.

path: '**' разрешает все пути, которые не определены

Ответ 4

Вы можете решить это с помощью перенаправления,

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

Это больше похоже на установку одного пути по умолчанию, если нет соответствующего пути.