不同的路由相同的组件

问题描述

我想实现这样的事情 /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 最终版本没有正则表达式.是否有我遗漏的东西，或者目前这是唯一的解决方案?

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

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