Question

问题 - 我可以将多个路由指向同一个延迟加载的模块（以及关联的路由器吗？）。我一直在＆＃34;错误：无法匹配任何路线：＆＃39; Page 30＆＃39;＆＃34;。

这是我的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＆amp; 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'] }

如果我删除了＆＃39;＆＃39;懒惰路由中的默认路径，我得到＆＃34;错误：无法匹配任何路由：＆＃39; Page 30＆＃39;＆＃34;。 routeLinks在更改为/ Page30和/ Page31时看起来正确 - 但由于某种原因，它们没有被正确路由。任何帮助赞赏。 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

访问

Answer 2

我正在尝试同样的事情，我找到了解决方案。

在app.module路由中，您可以执行类似

的操作

{
 path: '',
 component: UserLayoutComponent,
 children: [
 {path: '', component: HomeComponent},
 {
  path: '',
  loadChildren:'app/user/user/user.module#UserModule'
 }
 ]
 }

现在UserModule是延迟加载的

并且在用户模块路由中可以像这样

const routes: Routes = [
 { path: 'profile', component: ProfileComponent },
 { path: 'edit', component: EditProfileComponent} 
];

同样配置文件和编辑将像：localhost：8080 / profile和localhost：8080 / edit

要检查模块是否实际上是延迟加载，请将一些console.log（）放在模块的构造函数中。

希望这有帮助，谢谢

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

2 个答案: