angular 7中的嵌套路由，使用模块和延迟加载
我在创建角度路由时遇到了问题。我已经实现了功能模块，并且我正在为每个模块使用路由。我希望路由从应用程序到布局，仪表板，然后到帐户。路由未正确创建，似乎正在跳过仪表板，路由直接转到帐户。下面是我使用augury调试路由时的结果。
下面是我为每条路线编写的代码。每条路由都在自己的模块中。我真的希望将路由分开放在模块中。任何建议都将不胜感激。
//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: [] } ];
回答 1
Stack Overflow用户
发布于 2019-05-27 00:47:04
你好，朋友们，我发现了问题所在。我删除了仪表板模块中的accounts模块的导入。这确保了当路由生成的帐户路由被放置在仪表板之后。这是因为我懒惰地加载模块。这是我的路由在This is what my routes looked like after之后的样子
另外，确保在子路由中添加/，因此angular会将此路由附加到其父路由，即帐户摘要路由器链接在我的侧边栏'/ accounts / summary‘中如下所示。
其他的一切都保持不变。现在，我的帐户摘要组件被放置在我的仪表板路由器链接中，并且显示在我的侧边栏旁边
https://stackoverflow.com/questions/56311772
复制相似问题
腾讯云开发者
