Angular 5 中的嵌套路由答案

【问题标题】：Nested routing in Angular 5Angular 5 中的嵌套路由
【发布时间】：2018-04-14 10:23:39
【问题描述】：

我有以下模块结构：

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>

重点是将应用程序路由到/index组件，以这样的方式通过RooComponent --> AppComponent --> MainComponent --> IndexComponent

到目前为止，通过上述路线，AppComponent 被绕过了！

有什么想法吗？

谢谢

【问题讨论】：

你能在 stackblitz 上重现这个问题吗？

标签： angular angular5 angular-routing angular-router

【解决方案1】：

使用您当前的路由配置，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'
    }]
  }]
}];

【讨论】：