Угловые 1,5-компонентные родственные компоненты маршрутизатора

Question

Есть ли способ с новым компонентным маршрутизатором для Angular 1.5 сохранить родственный компонент в директиве ng-outlet? Я хочу показать подробный вид параллельно с родным списком. Насколько я понимаю официальные документы ( https://docs.angularjs.org/guide/component-router), это возможно с помощью маршрутизатора $$ и связать его с дочерним компонентом.

Вот что я пытался сделать: http://plnkr.co/edit/KzW8fLAxrte9jSg5jhEg?p=preview

<ng-outlet><crisis-detail $router="$$router"></crisis-detail>

Есть похожий пост на эту обязательную тему:

Angular 1.5 компонентная привязка к маршрутизатору

Answer 1

Насколько мне известно, на Angular 1.5 Component Router нет возможности одновременно отображать своих братьев и сестер.

Тем не менее, обходной путь - сделать брата дочерним, а затем использовать пустой компонент для отображения по умолчанию маршрута "без подробностей".

Временное решение:

Во-первых, нам нужен некоторый корневой компонент для активации самого списка:

.component('listRoot', {
      template: '<ng-outlet></ng-outlet>', //just ng-outlet, to render List inside
      $routeConfig: [
          {path: '/...', name: 'ListRoot',component: 'list' }, 
      ]
 })

Затем нам нужно добавить компоненты для списка, детализации и режима noDetail.

.component('list', {
  template: 'List  ...  <ng-outlet></ng-outlet>',
  $routeConfig: [
      {path: '/', name: 'List',component: 'noDetails', useAsDefault: true }, 
      {path: '/:id',name: 'Details',component: 'details'}
  ],
  bindings: {
    $router: '<'
  },
  controller: function () {
      var ctrl = this
      $routerOnActivate = function(route) {
          ctrl.router = this.$router;
      }
      this.goToDetails = function(id) {
          ctrl.$router.navigate(['Details', {id: id}])
      }
  }
})
.component('detail', {
  template: 'Details: <a ng-link="[\'List\']">Go Back</a>'
})
.component('noDetails', {
  template: '' //just empty template
})

Доступ к родителю:

Кроме того, чтобы иметь возможность уведомить родительский элемент (в вашем примере - дочерний компонент Detail, сообщающий ему идентификатор для List и List, помечающий его как выбранный после), вы можете использовать параметр require component, чтобы иметь возможность доступа к области родительского компонента.

.component('detail', {
  template: 'Details: <a ng-link="[\'List\']">Go Back</a>',
  require: {
      parent: '^list'
  },
  controller: {
      this.goBackWithNotify = function(data) {
          ctrl.parent.someParentComponentProperty = data;
      }
  }
})

Отредактированный плункер с примером.

PS: я использовал более свежую версию роутера.