Возможно ли для углового маршрутизатора загрузить несколько компонентов для одного состояния - PullRequest
Новая
       37

Возможно ли для углового маршрутизатора загрузить несколько компонентов для одного состояния

0 голосов
/ 23 мая 2018

В AngularJ, использующих библиотеку ui-router, можно определить несколько именованных представлений для одного состояния (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>

Я пытался повторить то же самое в angular с именованными выходами маршрутизатора, но я не уверен, возможно ли это вообщечтобы сделать это.

Маршруты в угловых выглядят следующим образом. 

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'
  }
];

С этим я могу перейти к выходам по умолчанию, но я не могу идти дальше вниз по иерархии.

Моя попытка сделать это может быть найдена здесь .

Это правильный путь?Есть ли способ добиться того же поведения, что и у ui-router с использованием углового роутера?

...