角度路由器是否可以为一个状态加载多个组件

Question

在使用ui-router库的AngularJs中，可以为单个状态（url）定义多个命名视图，并在其中加载多个组件。

有没有办法使用AngularRouter实现相同的目标？

在AngularJS中，它看起来像这样：

$stateProvider.state('layout', {
  url: '/layout',
  views: {
    'nav': {
      template: '<nav-bar></nav-bar>'
    },

    'body': {
      template: '<master-detail></master-detail>',

    },
    abstract: true
  }
});

$stateProvider.state('layout.index', {
  url: '',
  views: {
    'master@layout': {
      template: '<default-master></default-master>'
    },
    'detail@layout': {
      template: '<default-detail></default-detail>'
    }
  }
});

$stateProvider.state('layout.index.alternative', {
  url: '',
  views: {
    'master@layout': {
      template: '<alternate-master></alertnate-master>'
    },
    'detail@layout': {
      template: '<alternate-detail></alternate-detail>'
    }
  }
});

<!-- main -->
<div ui-view="nav"></div>
<div ui-view="body"></div>

<!-- master-detail -->
<div ui-view="master"></div>
<div ui-view="detail"><div>

我尝试使用指定的路由器插座以角度复制相同的内容，但我不确定是否可以这样做。

角度的路线看起来像这样。

const routes: Routes = [{
    path: 'layout',
    component: NavLayoutComponent,
    children: [{
        path: '',
        pathMatch: 'full',
        children: [{
            path: 'parent',
            outlet: 'nav',
            component: NavigationComponent
          },
          {
            path: 'parent',
            outlet: 'body',
            component: MasterDetailBodyComponent,
            children: [{
                path: '',
                outlet: 'master',
                pathMatch: 'full',
                component: DefaultMasterComponent
              },
              {
                path: '',
                outlet: 'detail',
                pathMatch: 'full',
                component: DefaultDetailComponent
              },
              {
                path: 'alt',
                outlet: 'master',
                component: AlternativeMasterComponent
              },
              {
                path: 'alt',
                outlet: 'detail',
                component: AlternativeDetailComponent
              }
            ]
          }
        ]
      },

    ]
  },
  {
    path: '',
    redirectTo: 'layout',
    pathMatch: 'full'
  }
];

有了这个，我可以导航到默认出口，但我无法进一步深入到层次结构中。

我可以在here找到我这样做的尝试。

这是正确的方法吗？有没有办法实现ui-router使用角度路由器的相同行为？