Question

我制作了一个仪表板应用程序，用于使用angular 6管理数据。但是当我嵌套超过1个lazyload路由时，我卡住了，这是行不通的，似乎不能在angular路由器中添加超过1个lazyload路由

我的应用程序路由：

const appRoutes: Routes = [
  {
    path: '',
    component: SigninComponent,
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    loadChildren: './core/dashboard/dashboard.module#DashboardModule'
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

我的仪表板路线

const dashboardRoutes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [

      {
        path: 'products',
        pathMatch: 'full',
        loadChildren: './products/products.module#ProductModule'
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(dashboardRoutes)],
  exports: [RouterModule]
})

我的产品路线：

const productRoutes: Routes = [
  {
    path: '',
    component: ProductListComponent,
    children: [
      {
        path: ':id',
        component: ProductEditComponent
      },
      {
        path: 'addproduct',
        component: ProductCreateComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(productRoutes)],
  exports: [RouterModule]
})

当我访问localhost：4200 / dashboard / products / id3时，发生错误：无法匹配任何路由“ dashboard / products / id3”。我认为我在路由设置中的某些地方错了，但我找不到错误所在。有人可以帮助我吗？

Answer 1

我已经为您创建了一个页面。只需检查并做相应的更改。您需要正确检查模块路径，否则它应该没有问题。您可以将网址更改为hello。

https://stackblitz.com/edit/angular-lazy-loading-nweyjt

// For eg.
// https://stackblitz.com/edit/angular-lazy-loading-nweyjt/hello/3

如何在Angular路线中嵌套1个以上的路线？

1 个答案: