我有以下模块结构:
1- 根模块
路由如下:
const routes: Routes = [
{ path: '', redirectTo: 'app', pathMatch: 'full' }
];
2- AppModule
使用以下路由:
const routes: Routes = [
{
path: 'app',
component: AppComponent,
children: [
{
path: '',
redirectTo: 'index',
pathMatch: 'full'
}
]
}
同时,AppModule
导入了 MainModule
,这是一个纯粹的路由模块,配置如下:
const routes: Routes = [
{
path: '',
component: MainComponent,
children: [
{
path: 'index',
loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
},
{
path: '',
redirectTo: 'index',
pathMatch: 'full'
}
]
}
现在,
RootComponent
是起点:@Component({
selector: "app-root",
template: "<router-outlet></router-outlet>"
})
export class RootComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
AppComponent
的定义如下:
<router-outlet></router-outlet>
<app-quick-sidebar></app-quick-sidebar>
最后,
MainComponent
被定义为:<app-header-nav></app-header-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>
整个重点是以这样的方式将应用程序路由到 /index 组件,以通过
RooComponent
--> AppComponent
--> MainComponent
--> IndexComponent
。到目前为止,使用上述路由,
AppComponent
被绕过了!有什么想法吗?
谢谢。