因为我听说 Angular 的路由器支持嵌套的
(父路由工作正常) 应用程序路由.module.ts
...
const routes: Routes = [
{ path: '', pathMatch: 'full', component: LoginComponent },
{ path: 'login', pathMatch: 'full', component: LoginComponent },
{ path: 'dashboard',
pathMatch: 'full',
component: DashboardComponent // this holds the second router-outlet
},
{ path: '**', component: LoginComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
app.component.ts——它只包含路由器导出,并且在顶层工作正常......
<router-outlet></router-outlet>
仪表板包含通用页眉、页脚、侧边栏等。所以这就是为什么我希望它在顶级路由器 socket 中。子路由器 socket 将填充 subview ,但不会填充。
尝试 1 dashboard-routing.module.ts
export const dashboardRoutes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', pathMatch: 'full', component: HomeComponent },
{ path: 'about', pathMatch: 'full', component: AboutComponent }
]
@NgModule({
imports: [
RouterModule.forChild(dashboardRoutes)
],
exports: [ RouterModule ]
})
export class DashboardRoutingModule { }
根据 Angular2 : Multiple Router-Outlets & Router-Outlets Inside Child Route 尝试 2 dashboard-routing.module.ts
export const dashboardRoutes: Routes = [
{
path: 'dashboard',
children:[
{ path: '', component: DashboardComponent},
{ path: 'home', component: HomeComponent},
{ path: 'about', component: AboutComponent}
]
}
]
@NgModule({
imports: [
RouterModule.forChild(dashboardRoutes)
],
exports: [ RouterModule ]
})
export class DashboardRoutingModule { }
在 Dashboard 模板中,这个嵌套的 router-outlet 没有填充。相反,app.component.html 中的顶级路由器导出被填充:(
dashboard.component.html
<header>...</header>
<aside class="sidenav">...<aside>
<!-- why can't I populate you? -->
<router-outlet></router-outlet>
************** 回答,非常感谢PierreDuc ! **************
应用路由.module.ts
// seems counter-intuitive that the dashboard component isn't actually in here..., but it works!
const routes: Routes = [
{ path: '', pathMatch: 'full', component: LoginComponent },
{ path: 'login', pathMatch: 'full', component: LoginComponent },
{ path: '**', component: LoginComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
DashboardRoutingModule // this is the magic. I'm assuming to put it second is better (though putting it first didn't seem to have any immediate negative effect)
],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
dashboard-routing.module.ts
export const dashboardRoutes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
children:[
{ path: '', component: HomeComponent },
{ path: 'home', pathMatch: 'full', component: HomeComponent },
{ path: 'about', pathMatch: 'full', component: AboutComponent }
]
}
]
@NgModule({
imports: [
RouterModule.forChild(dashboardRoutes)
],
exports: [ RouterModule ]
})
export class DashboardRoutingModule { }
这是从根导航的方法:
登录.component.ts
... passed validation ...
this._router.navigate(['/dashboard']);
this._router.navigate(['/dashboard/home']);
或通过仪表板中的侧边栏通过 routerLink 进行路由 仪表板.component.html
[routerLink]="['../login']" <!-- back to login, though the '../' seems less than ideal
或在仪表板 View 中通过 routerLink 到子路由器导出: dashboard.component.html:
[routerLink]="['../about']"
最佳答案
子 router-outlet
由路由器配置中的 children
数组填充。但是重复发生了。您应该删除 AppRoutingModule
中的 dashboard
条目,然后进行尝试 2:
应用程序路由
const routes: Routes = [
{ path: '', pathMatch: 'full', component: LoginComponent },
{ path: 'login', pathMatch: 'full', component: LoginComponent },
{ path: '**', component: LoginComponent }
];
并保持你的 DashboardRoutingModule
在 attempt 2 中(使用 children 数组),并在 AppRoutingModule
或 中导入此模块应用模块
。
关于angular - 填充子路由器导出 Angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42612189/