路由 link 嵌套组件

Question

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

点击组件0的按钮，情况就变成这样了

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

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 }

          ]
        }
      ]
  }
];

P.S。在此 "version" 中，我添加了一些关于初始 post 的额外组件。

路由 link 嵌套组件

Routing link nested components

angular2-routing

angular