angular 6 中的命名路由器和嵌套路由

Question

有人可以协助导航到特定路线吗？我已经坐了几个小时了。这是我拥有的：

const routes: Routes = [
  {
    path: '', redirectTo: 'home', pathMatch: 'full'
  },
  {
    path: 'home',
    component: MainlayoutComponent,
    canActivate: [AuthenticatedGuard],
    children: [
      { path: 'listmanagement', component: ListmanagementComponent, outlet: 'main' },
      {
        path: 'buildings', component: BuildingslistComponent, outlet: 'main',
        children: [
          { path: '', redirectTo: 'buildings', pathMatch: 'full' },
          { path: 'building', component: BuildingdetailComponent },
          { path: 'building/:code', component: BuildingdetailComponent }
        ]
      },
      {
        path: 'calendarandrates', component: CalendarandratesComponent, outlet: 'main',
        children: [
          { path: '', redirectTo: 'calendarandrates', pathMatch: 'full' },
          { path: 'rescalendar', component: RescalendarlistComponent },
          { path: 'roomrates', component: ResratesmainComponent },
        ]
      },
      { path: 'users', component: UsersComponent, outlet: 'main' },
    ]
  },
  {
    path: 'login',
    component: LoginlayoutComponent,
    children: [
      { path: '', component: LoginComponent, outlet: 'login' },
    ]
  },
  {
    path: '**',
    component: NotfoundComponent,
    canActivate: [AuthenticatedGuard],
    outlet: 'main'
  }
];

然后在我的 app.component 我只有主路由器插座：

<router-outlet></router-outlet>

这个路由器出口假设只加载两个布局组件之一，maned loginlayout.component 和 mainlayout.component：一个用于当用户未登录时（以免显示侧面nav 和其他工具栏项，此布局组件只有左上角的简单徽标和中间的 header），而其他布局组件有侧边导航和更多工具栏项。所有这一切都工作正常，我能够使用第一个布局登录并加载第二个布局。各个布局页面中的出口路由器是：

<router-outlet name="login"></router-outlet>
<router-outlet name="main"></router-outlet>

不知何故，一旦进入主布局组件，我就可以导航到第 1 层 child（例如建筑物），使用如下内容：

this.router.navigate(['/home', { outlets: { main: ['buildings'] } }])

我似乎无法弄清楚以后如何导航到第二个 child（例如，一旦进入建筑组件，我想通过单击编辑导航到（单个）建筑项目（带参数）或添加（不带参数）新按钮

我进行了搜索，但我只得到了只有一个级别的示例 child，但没有像我在本示例中那样有 2 个级别。任何帮助将不胜感激。

Answer 1

我解决了我的问题并继续开发。现在我已经完成了，我想我应该 post 我的修复。我将路线更改为如下所示：

const routes: Routes = [

  /*==================================Main Outlet==================================*/
  {
    path: '', redirectTo: 'home', pathMatch: 'full'
  },
  {
    path: 'home', component: MainlayoutComponent, canActivate: [AuthGuard],
    children: [
      { path: '', component: HomeComponent, outlet: 'main' },

      { path: 'listmanagement', component: ListmanagementComponent, outlet: 'main' },

      { path: 'buildings', component: BuildingslistComponent, outlet: 'main' },
      { path: 'buildings/building/:code', component: BuildingdetailComponent, outlet: 'main' },
      { path: 'buildings/building', component: BuildingdetailComponent, outlet: 'main' },
      { path: 'buildings/allbedspaces', component: BedspacelistComponent, outlet: 'main' },

      { path: 'calendarandrates', component: CalendarandratesComponent, outlet: 'main' },
      { path: 'calendarandrates/rescalendar', component: RescalendarlistComponent, outlet: 'main' },
      { path: 'calendarandrates/roomrates', component: ResratesmainComponent, outlet: 'main' },

      { path: 'users', component: UsersComponent, outlet: 'main' },
      { path: 'users/myaccount', component: MyaccountComponent, outlet: 'main' },

      { path: '**', component: NotfoundComponent, canActivate: [AuthGuard], outlet: 'main' }
    ]
  },

  /*==================================Login Outlet==================================*/
  {
    path: 'login', component: LoginlayoutComponent,
    children: [{ path: '', component: LoginComponent, outlet: 'login' } ]
  }
];

然后在导航到路线时，我只使用以下代码：

this.router.navigate(['/home', { outlets: { main: ['buildings', 'allbedspaces'] } }], { skipLocationChange: true })

skipLocationChange: true 因为我在路由时跳过所有位置更改并始终保留基础 url 因为我不希望用户使用地址栏在应用程序中导航

angular 6 中的命名路由器和嵌套路由

Named router and nested routes in angular 6

nested-routes

angular-routing

router-outlet