路由链接嵌套组件

Question

我的路由器链路有问题。最初我有这种情况

https://i.stack.imgur.com/hBdXZ.jpg

单击组件 0 的按钮，情况会以这种方式变化

https://i.stack.imgur.com/rLYya.jpg

我创建了一个应用路由服务来管理路由

const routes: Routes = [
  { path: '', redirectTo: '/a', pathMatch: 'full'},
  { path: 'a',  component: component 0 },
  { path: 'b', component: component 2 },
  { path: 'c', component: component 3 },
  { path: 'd', component:component 4}
  { path: 'e', component:component 5}

];

我在组件 1 的模板中添加了<router-outlet></router-outlet>。这很好用。

现在单击组件 3 的按钮，我会这种情况

http://imgur.com/a/CcW4i

相反，我有这个

http://imgur.com/a/mubas

我尝试了不同的方法但没有结果，问题出在哪里？

谢谢

Answer 1

我用这种方式解决了

const routes: Routes = [
  { path: '', redirectTo: '/a', pathMatch: 'full'},
  { path: 'a',  component: Component0 },
  { path: 'b', component: Component1,

      children: [
        { path: 'c',  component: Component2 },
        { path: 'd',  component: Component3},
        { path: 'e',  component: Component4,
          children: [
            { path: 'f',  component: Component5 },
            { path: 'g',  component: Component6 },
            { path: 'h',  component: Component7 }
          ]
        }
      ]
  }
];

附言在这个"版本"中，我添加了一些关于初始帖子的额外组件。