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

Question

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

app.routing.module.ts

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

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 中做了哪些更改以显示这些组件。

Answer 1

一种方法是将 settings 作为此模块的默认路径（组件），并将所有其他组件作为子路由。

Simple DEMO

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 const routes: Routes = [
    {
        path: '',
        component: settingsComponent
    },
    {
        path: 'edit',
        component: settingsEditComponent
    },
    {
        path: 'account',
        component: accountComponent
    },
    {
        path: 'account/edit',
        component: accountEditComponent
    }
];

http://localhost:4200/setting 将显示设置组件。

http://localhost:4200/settings/account 将显示帐户组件。

..等等

Answer 2

如果你真的想这样做，你可以使用 UrlMatcher 找到正确的组件。

SIDE NOTE:I 不建议您这样做。取而代之的是我的其他答案。我认为这是一种更好的方法。但是 of-course 这是你的决定。

Simple demo

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 将显示帐户组件。

Answer 3

你可以这样做

设置-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: PubliclistsComponent,
        children: [
          {path: '', redirectTo: 'all', pathMatch: 'full'},
          {path: 'all', component: ChallengelistComponent},
          {path: 'me', component: ChallengelistComponent}
        ]
    }
];

const settingsRoutes: Routes = [
    {
        path: '',
        component: SettingsComponent,
        children: [
          {path: '', redirectTo: 'participants', pathMatch: 'full'},
          {path: 'bleh', component: TeamlistComponent},
          {path: 'bleh-bleh', component: TeamlistComponent}
        ]
    },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AccountsRoutingModule { }


@NgModule({
  imports: [RouterModule.forChild(settingsRoutes)],
  exports: [RouterModule]
})
export class SettingsRoutingModule { }

settings.module.ts

@NgModule({
  declarations: [],
  imports: [
    ...
  ]
})
export class AccountModule { }


@NgModule({
  declarations: [],
  imports: [
    ...
  ]
})
export class SettingsModule { }

应用-routing.ts

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

Answer 4

添加到上面的，您可以在您的模块中创建一个 通用匹配器函数：

// load components from root path
export function isPath(url: UrlSegment[], group: UrlSegmentGroup, route: Route) {
  let r = '';
  for (const p of group.segments) {
    if (p !== group.segments[0]) {
      r += '/';
    }
    r += p.path;
  }
  return r === route.data!.path
    ? ({ consumed: url })
    : null;
}

const routes: Routes = [
  { component: SettingsComponent, matcher: isPath, data: { 'path': 'settings' } },
  { component: AccountComponent, matcher: isPath, data: { 'path': 'account' } },
{ component: AccountComponent, matcher: isPath, data: { 'path': 'full/path' } }
];

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

multiple path for load same module - lazy loading

angular

angular-router