添加子路由到子路由

Question

angular 2路由器目前不允许多个嵌套级别。

如果您的结构如下：

/users/profile/detail

如何链接到/users/profile，当我点击user组件中的按钮时，它应该路由到profile组件？

代码：

const appRoutes: Routes = [
  {
    path: 'menu',
    component: MenubarComponent,
    children: [

      { path: 'page1', component: page1Component },
      { path: 'user', component: userComponent,
       children: [
        { path: 'profile', component: profileComponent },
       ]
      },
      { path: 'page2', component: page2Component },
      { path: 'page3', component: page3Component }

    ]
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },

  { path: 'settings', component: SettingsComponent }
];

Answer 1

您需要定义到detail路线的profile子路线才能导航到/users/profile/detail。只需添加第二个子路由到profile，并在导航到/users/profile时显示虚拟组件

const appRoutes: Routes = [
  {
    path: 'menu',
    component: MenubarComponent,
    children: [

      { path: 'page1', component: page1Component },
      { path: 'user', component: userComponent,
       children: [
        { path: 'profile', component: profileComponent,
          children: [
            { path: '', component: dummyComponent, pathMatch: 'full' },
            { path: 'detail', component: userProfileDetailComponent }
        },
       ]
      },
      { path: 'page2', component: page2Component },
      { path: 'page3', component: page3Component }

    ]
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },

  { path: 'settings', component: SettingsComponent }
];