不同路线相同的组件

Question

我想实现这样的东西/products显示所有产品并/products/:category显示与特定类别相关的所有产品.为实现这一点,我有以下路线:

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

问题

当我在类别之间切换时,一切都很好,当我在所有产品和类别产品之间切换时,反之亦然,Angular会重新绘制组件,并且会出现闪烁现象.

Angular 2路由器最终版本没有正则表达式,据我所知.有什么东西我缺少,或者现在这是唯一的解决方案？

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

Answer 2

我不知道是否有另一种方法可以做到这一点,但我设法使用以下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 {
}

处理ListComponent上的路径更改:

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

并在ListComponent模板上添加路由器插座.