不同路线相同的组成部分 [英] Different routes same component

问题描述

我想要实现这样的功能/products显示所有产品，而/products/:category显示与特定类别相关的所有产品.为此，我有以下路线:

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

问题

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

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的最终版本没有Regex.是我遗失的东西，还是目前这是唯一的解决方案?

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?

推荐答案

您可以通过添加路线来解决它

you can solve it by adding routes

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

和在ExperienceComponent导入中

and in ExperienceComponent import

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

并在构造函数中添加此参数

and in constructor add this parameter

constructor(public route: ActivatedRoute)

并且在内部构造函数中获取url

and inside constructor get url

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

这篇关于不同路线相同的组成部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！