在 Angular 6 中使用延遲加載時，路由不適用於不同的路由

Question

實際上我在我的應用程序中建立延遲加載時遇到了問題。 我正在使用 angular 6. 這是場景-

在我的 app-routing.module.ts 我有以下路線 -

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: 'dashboard', pathMatch: 'full'
  },
  {
    path:'home',
    loadChildren: './main/home/home.module#HomeModule'
  }

  { path: '**', redirectTo: '/404' }
];

在我的 home.module.ts 中，我有這條路線-

常量路線：路線= [

  {
    path: '',
    component: HomeComponent
  },
  {
    path:'list',
    component: ListComponent
  }

];

現在想像下面一樣導航-

1. /home---> 主頁組件
2. /list---> 列表組件

我可以導航到 HomeComponent 但無法導航到 ListComponent。任何人都可以幫助我如何實現這一目標。 謝謝

Answer 1

為了訪問延遲加載路由列表，唯一的方法是通過主路由 aka (localhost:4200/home/list)

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: 'dashboard', pathMatch: 'full'
  },
  {
    path:'home',
    loadChildren: './main/home/home.module#HomeModule'
  },

  { path: '**', redirectTo: '/404' }
];

const routes: Routes = [

  {
    path: '',
    component: HomeComponent
  },
  {
    path:'list',
    component: ListComponent
  }

];

根據您提供的代碼，home 模塊下的所有組件都將以路由前綴 home 開頭。 啟動應用程序后，您可以使用以下方式訪問登錄組件：

http//:localhost:4200/home/列表