加载同一模块的多路径-延迟加载

问题描述

我在一个模块中有多个组件.我想显示基于路由路径的组件. 对于 http://localhost:4200/account 我想显示帐户组件.对于 http://localhost:4200/setting 我想显示设置组件..etc

I have multiple components in one module. I want to show the components based on routing path. for http://localhost:4200/account I want to show account component.for http://localhost:4200/setting I want to show settings component ..etc

app.routing.module.ts

app.routing.module.ts

{
    path: 'account',
    loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
    path: 'settings',
    loadChildren:'./modules/settings/settings.module#SettingsModule',
},

settings.routing.module.ts

settings.routing.module.ts

export const routes: Routes = [
    {
        path: 'account',
        component: accountComponent
    },
    {
        path: 'account/edit',
        component: accountEditComponent
    },
    {
        path: 'settings',
        component: settingsComponent
    },
    {
        path: 'settings/edit',
        component: settingsEditComponent
    }
];

我在settings.routing.module.ts中做了哪些更改以显示那些组件.

what changes I do in settings.routing.module.ts to show those components.

推荐答案

如果您确实要执行此操作，则可以使用 UrlMatcher 来找到正确的组件.

If you really want to do this you can use UrlMatcher to find the correct component.

侧面注意:我不建议您这样做.取而代之的是我的其他答案.我认为这是一种更好的方法.当然，这是您的决定.

SIDE NOTE:I wouldn't recommend you to do this. instead go with my other answer. I think it's a better approach. BUT of-course it's your decision.

简单演示

app.routing.module.ts (未更改)

{
    path: 'settings/account',
    loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
    path: 'settings',
    loadChildren:'./modules/settings/settings.module#SettingsModule',
}

settings.routing.module.ts

export function isAccount(url: UrlSegment[], group: UrlSegmentGroup) {
  return group.segments.length === 1 && group.segments[0].path.endsWith('account') ? ({consumed: url}) : null;
}

export function isSettings(url: UrlSegment[], group: UrlSegmentGroup) {
  return group.segments.length === 1 && group.segments[0].path.endsWith('settings') ? ({consumed: url}) : null;
}

export const routes: Routes = [
    {
        path: 'account',
        component: accountComponent,
        matcher: isAccount
    },
    {
        path: 'account/edit',
        component: accountEditComponent
    },
    {
        path: 'settings',
        component: settingsComponent,
        matcher: isSettings
    },
    {
        path: 'settings/edit',
        component: settingsEditComponent
    }
];

结果正是您要寻找的:

http://localhost:4200/settings 将显示设置组件.

http://localhost:4200/account 将显示帐户组成部分.

http://localhost:4200/account will show account component.

这篇关于加载同一模块的多路径-延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！