angular - 来自同一惰性路由的多个组件不起作用

Question

问题 - 我可以有多个路由指向同一个延迟加载模块(和关联的路由器吗？)。我不断收到“错误:无法匹配任何路线:'Page30'”。

这是我设置延迟加载的 app.routing.ts:

const appRoutes: Routes = [
  { path: '', component: Page1Component },                          // <-- default page
  { path: 'Page1', component: Page1Component },
  { path: 'Page2', component: Page2Component },
  { path: 'Page3', component: Page3Component },
  { path: 'Page30', loadChildren: './+lazy/lazy.module#LazyModule' },
  { path: 'Page31', loadChildren: './+lazy/lazy.module#LazyModule' },

  // { path: '**', component: PageNotFoundComponent }           // <-- route not found
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这是+lazy/lazy.routing.ts:

import { Page30Component } from './page30/page30.component';
import { Page31Component } from './page31/page31.component';

const routes: Routes = [

  { path: '', component: Page30Component },
  {path: 'Page30', component: Page30Component},
  {path: 'Page31', component: Page31Component}

];

export const routing: ModuleWithProviders =   RouterModule.forChild(routes);

这里是关联的 routerLinks。 (P1 是急切的，30 和 31 是懒惰的):

{ label: 'Take Payment', icon: 'ui-icon-assignment-ind', routerLink: ['/Page1'] },
{ label: 'Loss Mitigation', icon: 'ui-icon-announcement', routerLink: ['/Page31'] },
{ label: 'Bankruptcy', icon: 'ui-icon-create', routerLink: ['/Page30'] }

如果我删除惰性路由中的“默认路径”，我会收到“错误:无法匹配任何路由:'Page30'”。当它们更改为/Page30 和/Page31 时，routeLinks 看起来是正确的 - 但由于某种原因，它们没有被正确路由。任何帮助表示赞赏。 FWIW，我正在使用带有 Web Pack 的 Angular CLI。

Answer 1

它可以与 { path: '', component: Page30Component } 一起使用吗？ ？如果是这样，我想这是因为 Page30 设置为指向该模块的父路由，并且在子根中子路由设置为 Page30。所以www.asdf.com/Page30/Page30和www.asdf.com/Page31/Page30是等价的。

所以应用程序路由将是:

const appRoutes: Routes = [
  { path: '', component: Page1Component },                          // <-- default page
  { path: 'Page1', component: Page1Component },
  { path: 'Page2', component: Page2Component },
  { path: 'Page3', component: Page3Component },
  { path: 'Lazy', loadChildren: './+lazy/lazy.module#LazyModule' },

  // { path: '**', component: PageNotFoundComponent }           // <-- route not found
];

子路由可以是:

const routes: Routes = [    
  {path: 'Page30', component: Page30Component},
  {path: 'Page31', component: Page31Component}    
];

您可以通过www.asdf.com/Lazy/Page30访问和www.asdf.com/Lazy/Page31