我有以下模块结构:
1-根模块
路由如下:
const routes: Routes = [
{ path: '', redirectTo: 'app', pathMatch: 'full' }
];
2- 应用模块
路由如下:
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>
重点是通过 RooComponent
将应用程序路由到/index 组件 --> AppComponent
--> MainComponent
--> IndexComponent
至此,通过以上路由,AppComponent
被绕过了!
有什么想法吗?
谢谢
最佳答案
根据您当前的路由配置,MainComponent
未配置在 AppComponent
路径的子数组中。那么为什么它会出现在它的模板中呢?
现在您的路由配置将像这样工作:
- 导航到
/app
将带您到AppComponent
- 导航到
/index
将带您到IndexComponent
。
实现 RooComponent
的预期行为 --> AppComponent
--> MainComponent
--> IndexComponent
,您的路线配置应如下所示:
const routes: Routes = [{
path: '',
component: AppComponent,
children: [{
path: '',
component: MainComponent,
children: [{
path: '', redirectTo: 'index', pathMatch: 'full'
}, {
path: 'index',
loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
}]
}]
}];
关于angular - Angular 5中的嵌套路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49830390/