不同的路由相同的组件答案

【问题标题】：Different routes same component不同的路由相同的组件
【发布时间】：2016-09-28 16:00:33
【问题描述】：

我想实现类似/products 显示所有产品，/products/:category 显示与特定类别相关的所有产品。为了实现这一点，我有以下路线：

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

问题

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

据我所知，Angular 2 Router 最终版本没有 Regex。有什么我遗漏的，还是目前这是唯一的解决方案？

【问题讨论】：

对于这种情况，我能找到的最接近的是这里：stackoverflow.com/questions/41899090/…这里有一种类似的情况：stackoverflow.com/a/41931088/2911817
您可以使用路径匹配器函数而不是指定静态路径来执行此操作：请参阅 angular.io/guide/routing-with-urlmatcher 和 stackoverflow.com/a/56391974/1751497

标签： angular angular2-routing

【解决方案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);
})

【讨论】：

这对我有用，然后为了弄清楚我最终到达的路径，我使用了带有 if(this.route.snapshot.routeConfig.path == 'pending') 的 ActivateRoute
谢谢！诀窍是不要将组件分配给基本路由，而是在 :id 子路由之外分配一个带有 path: '' 和组件集的新子路由。这解决了我所有的问题:)

【解决方案2】：

你可以通过重定向来解决，

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

这更像是设置一个默认路径，除非有匹配的路径。

【讨论】：

【解决方案3】：

我不知道是否有其他方法可以做到这一点，但我设法使用以下 hack 使其工作。

export const productsRoutes: Route[] = [
    {
        path: 'products',
        component: ProductsComponent,
        children: [
            {
                path: '',
                pathMatch: 'prefix',
                component: ProductsListComponent,
                children: [
                    {
                        path: '',
                        component: EmptyComponent,
                    },
                    {
                        path: ':category',
                        component: 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 模板上添加一个路由器出口。

【讨论】：

【解决方案4】：

您还可以定义到特定路径的重定向：

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

/home 是您要重定向到的路由。

path: '**' 解析所有未定义的路径

【讨论】：

路径按照定义的顺序进行检查。所以** 路径需要LAST，或者战略性地放置。