Angular 5 - 路由到具有不同 URL 的同一组件

Question

我有以下路由应该路由到同一个组件，我可以通过使用以下结构让它工作。

const carModuleRoutes: Routes = [
    { path: 'car/:category/:carId', component: CarDetailComponent},
    { path: 'car/:carId', component: CarDetailComponent},
];

但我知道这不是这样做的标准方法，是否有执行相同功能的正确方法？

Answer 1

可以使用，您也可以对同一组件使用重定向和子路由。你做对了。

Refrence:https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

Child Routing REF : https://angular.io/guide/router#child-routing-component

Answer 2

这是定义 routes 及其各自的 components 的标准方式。您在 routing 模块中，您正在尝试定义 routes，而不是 components.

因此，不要忘记将相同的 component 分组并为它们定义 routes。你所做的似乎很合适。

编辑：

你的情况很简单，你可以简单地做:

const carModuleRoutes: Routes = [
    { path: 'car/:category/:carId', redirectTo : 'car/:carId', pathMatch : 'full'},
    { path: 'car/:carId', component: CarDetailComponent},
];

注：

在这种情况下，您的 url 会发生变化，您可能会丢失 :category 的值，这可能在组件中很有用。所以最好指定多个路由指向同一个组件作为一个单独的案例。

Answer 3

我使用以下方法解决了需要使用同一组件导航到不同路线的问题：

/* My Grid route: */
const GridRoutes: Routes = [
    {
        path: 'grid',
        component: BasicLayoutComponent,
        children: [
            {
                path: '',
                component: ListItemComponent
            },
            {
                path : 'view-files/:id',
                component : ListItemComponent
            },
            {
                path : 'filter',
                component: ListItemComponent
            }
        ]
    }
];

@Component({
  templateUrl: './list-item.component.html',
})
export class ListItemComponent {

   ...
   ...

    /* Function to navigate */
    navigateToRoute(path: string) {
       this.router.navigate([ path ]);
    }
}

然后，调用模板上的导航功能(list-item.component.html)。

<a (click)="navigateToRoute('page/edit/' + dataItem.id)">Link</a>

希望有所帮助！

Angular 5 - 路由到具有不同 URL 的同一组件

Angular 5 - Routing to the same component with different URL's

angular

angular-ui-router

angular2-routing