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的相同组件

3 个答案: