Angular 路由器延迟加载：以相同路径开始的两个不同模块

Question

我有两个模块，每个模块都有两条子路由。
第一个模块使用如下路由：
项目/:id
项目/:id/print

第二个：
项目/:id/edit
项目/:id/marketing

所以我猜想如何为这种情况进行配置：

export const appRoutes: Routes = [
    {
        loadChildren: './features/item-details/item-details.module#ItemDetailsModule',
        path: 'items/:id'
    },
    {
        loadChildren: './features/item-management/item-management.module#ItemManagementModule',
        path: 'items/:id'
    }
];

我不想合并这两个模块，因为它们几乎没有共同点。
而且我对将它分成 4 个不同模块的想法也不满意。

Answer 1

您对不同的模块使用相同的路径，为什么不切换路径，您将拥有一个更加独立的模块和关注点。

export const appRoutes: Routes = [
    {
        loadChildren: './features/item-details/item-details.module#ItemDetailsModule',
        path: 'items/details/:id'
    },
    {
        loadChildren: './features/item-management/item-management.module#ItemManagementModule',
        path: 'items/management/:id'
    }
];

Answer 2

实际上，使用 UrlMatcher 有一种方法可以做到这一点。您可以检查目标 url 是否加载模块。 https://angular.io/api/router/UrlMatcher

const managmentMatcher = (segments: UrlSegment[]) => {

    return /^\/*items\/\d+\/(edit|marketings)\/*.test(segments.join('/')) ?
       { consumed: segments.slice(0, 2), posParams: { id: segments[1] } } : null;

}

export const appRoutes: Routes = [
    // special routes
    {
        loadChildren: './features/item-management/item-management.module#ItemManagementModule',
        matcher: managmentMatcher
    },
    // default routing for items/:id
    {
        loadChildren: './features/item-details/item-details.module#ItemDetailsModule',
        path: 'items/:id'
    }
];

Angular 路由器延迟加载：以相同路径开始的两个不同模块

Angular router lazy loading: two different modules which start with the same path

lazy-loading

angular-routing

angular