Question

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

第二个：
项目/：id /编辑
项目/：id /营销

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

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'
    }
];

我不想将这两个模块结合在一起，因为它们几乎没有什么共同之处。
而且我也不满意将其分为四个不同模块的想法。

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'
    }
];

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

2 个答案: