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

问题描述

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

Question - can I have multiple routes point to the same lazy loaded module (and associated router?). I keep getting "Error: Cannot match any routes: 'Page30'".

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

Here is my app.routing.ts that sets up the lazy loading:

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:

Here is the +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是懒惰的):

Here are the associated routerLinks. (P1 is eager, 30 & 31 are lazy):

{ 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时，routeLink看起来正确-但由于某些原因，它们未正确路由.任何帮助表示赞赏. FWIW，我正在将Angular CLI与Web Pack一起使用.

If I remove the '' default path in the lazy routing, I get the "Error: Cannot match any routes: 'Page30'". The routeLinks look right as they change to /Page30 and /Page31 - but for some reason they are not being correctly routed. Any help appreciated. FWIW, I'm using Angular CLI with Web Pack.

推荐答案

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

So is it working with { path: '', component: Page30Component }? If so, I imagine it's because Page30 is setup as the parent route that points to the module, and within the child roots the child route is set to Page30. So www.asdf.com/Page30/Page30 and www.asdf.com/Page31/Page30 would be equivalent.

因此，应用程序的路线为:

So the app routes would be:

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

这篇关于来自同一惰性路由的多个组件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！