使用模块和延迟加载在angular 7中嵌套路由

Question

我在创建角度路线时遇到麻烦。 我已经实现了功能模块，并且正在为每个这些模块使用路由。 我希望路线从应用程序到布局再到仪表板，再到客户。 路由创建不正确，似乎仪表板已被跳过，路由直接进入了帐户。 这是我使用augory调试路由时的外观。

这是我的每条路线的代码。 每条路线都在自己的模块中。 我真的很想将路由分隔在模块中。 任何建议将不胜感激。

 //app routes const appRoutes: Routes = [ { path: "login", component: LoginComponent }, { path: "", canActivate: [AuthGaurdService], loadChildren: "./layouts/layouts.module#LayoutsModule" }, { path: "**", component: PageNotFoundComponent } ]; //layout routes const LayoutRoutes: Routes = [ { path: "", component: LayoutsComponent, canActivate: [AuthGaurdService], children: [ { path: "", canActivateChild: [AuthGaurdService], children: [ { path: "account-information", loadChildren: "../account-information/account-information.module#AccountInformationModule" }, { path: "", loadChildren: "../dashboard/dashboard.module#DashboardModule" }, ] } ] } ]; //dashboard routes const routes: Routes = [ { path: "", component: DashboardComponent, canActivate: [AuthGaurdService], children: [{ path: "", canActivateChild: [AuthGaurdService], children: [ { path: "accounts", loadChildren: "./accounts/accounts.module#AccountsModule" }, { path: "", component: HomeComponent } ] }] } ]; //account routes const AccountsRoutes: Routes = [ { path: "accounts", component: AccountsComponent, canActivate: [AuthGaurdService], children: [ { path: "", canActivateChild: [AuthGaurdService], children: [ { path: "transactions", component: TransactionsComponent }, { path: "summary", component: SummaryComponent }, { path: "earnings", component: EarningsComponent } ] } ] } ]; 

 <!--app.html --> <router-outlet></router-outlet> <!-- layout.html --> <div class="page-container"> <app-navbar></app-navbar> <div class="page-content-wrapper "> <div class="content"> <router-outlet></router-outlet> </div> <div class="container-fluid container-fixed-lg footer"> <app-footer></app-footer> </div> </div> </div> <!-- dashboard.html --> <div class="page-container"> <app-navbar></app-navbar> <div class="page-content-wrapper "> <div class="content"> <router-outlet></router-outlet> </div> <div class="container-fluid container-fixed-lg footer"> <app-footer></app-footer> </div> </div> </div> <!-- accounts --> <router-outlet></router-outlet> 

这是我回家时页面的外观

这是帐户/摘要的

我的侧边菜单如下所示let retail: Array<Menu> = [ { name: "Home", router_link: "", submenu: [], toggle_submenu: false, icon: "" }, { name: "Accounts", router_link: "accounts/summary", toggle_submenu: false, icon: "", submenu: [ { name: "Summary", router_link: "accounts/summary", toggle_submenu: false, icon: "", submenu: [] }, { name: "Tansactions", router_link: "accounts/transactions", toggle_submenu: false, icon: "", submenu: [] }, { name: "Earnings", router_link: "accounts/earnings", toggle_submenu: false, icon: "", submenu: [] } ] }, { name: "Sales", router_link: "sales", toggle_submenu: false, icon: "", submenu: [] }, { name: "Inventory", router_link: "inventory", toggle_submenu: false, icon: "", submenu: [] }, { name: "Upload", router_link: "upload", toggle_submenu: false, icon: "", submenu: [] } ];

Answer 1

由于我没有看到完整的代码，因此我猜测您无法正确导航到您的路线。

使用延迟加载的模块时，无需在子路由中提供前缀。 例如在您的AppModule ：

{
    path: '', component: HomeComponent
    },
   {path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule' 
  }

并在您的DashboardModule

{
    path: '', component: DashboardComponent,
  },{
    path: 'accounts',
    loadChildren: '../accounts/accounts.module#AccountsModule' 
  }

然后，为了转到您的dashboard.component.html中的路由，您将编写

<a [routerLink]="['accounts']"> Account</a>

代替

<a [routerLink]="['/dashboard', 'accounts']"> Account</a>

因为在子级惰性加载的模块中，根路径从加载它的父级模块开始。

我创建了一个具有类似情况的stackblitz 演示 。

希望能帮助到你。

Answer 2

您好朋友，我知道了这个问题。 我在仪表板模块中删除了帐户导入模块。 这样可以确保将生成帐户路由的路由放置在仪表板之后。 这是因为我懒于加载模块。 这是我的路线后的样子这是我的路线后的样子

还请确保在子路由中添加/，以便将此路由附加到其父路由，即帐户摘要routerlink在我的侧边栏“ / accounts / summary”中看起来像这样。

其他所有东西都保持不变。 现在，我的帐户摘要组件被放置在仪表板路由器链接的内部，并显示在侧边栏旁边