Question

我有一个延迟加载的模块AccountModule，该模块在访问https://localhost:4201/account后加载。

app.routing.ts

const routes: Routes = [

  {
    path: '',
    loadChildren: () => import('./ui/pages/start/start.module')
      .then(m => m.StartModule)
  },


  {
    path: 'account',
    loadChildren: () => import('./ui/pages/account/account.module')
      .then(m => m.AccountModule)
  },

];

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: false,
  enableTracing: false
});

AccountModule有两条子路线。其中一个被紧急加载（/overview），而另一个被延迟加载（/albums）。

因此， acount.routing.ts 看起来像这样：

const routes: Routes = [

  {path: '', redirectTo: 'overview', pathMatch: 'full'},

  {
    path: 'overview',
    component: AccountComponent,
  },

  {
    path: 'albums',
    loadChildren: () => import('./albums/albums.module').then(m => m.AlbumsModule),
    // component: AlbumsComponent  // This works!
  },

];

export const AccountRouting = RouterModule.forChild(routes);

现在，如果我使用“紧急”加载（component:AlbumsComponent），则一切正常。但是，如果我切换到loadChildren: () => ...，路由将不再起作用。这个routerLink

<app-raised-button [routerLink]="['/account/albums']">
  My Albums
</app-raised-button>

结果为https://localhost:4201/account/albums（有效）或https://localhost:4201/account/albums/overview（无效）。但为什么？我该如何解决这个问题？

为什么仅由于模块/组件的加载方式而导致行为不同？

如果我将路径设置为./albums：

{
  path: './albums',
  loadChildren: () => import('./albums/albums.module').then(m => m.AlbumsModule),
},

我刚得到

错误：无法匹配任何路由。网址段：'account/albums'

Answer 1

我想您还没有为albums.routing.module提供路由？

由于您已经指导了albums.module，但是您可能没有从那里提供所显示的组件。

如果尚未创建到albums.routing.module，请创建一个并在同一模块中提供默认路由。

const routes: Routes = [

  {path: '', component:AlbumsComponent } ];

Answer 2

确保在相册模块中，您已经导入了您的路线，如下所示： RouterModule.forChild（albumsRoutes）

延迟加载另一个模块时路由中断

2 个答案: