Question

Angular 1.5的新组件路由器是否有办法保持兄弟组件在ng-outlet指令中呈现？我想与兄弟列表视图并行显示详细视图。据我所知，官方文档（https://docs.angularjs.org/guide/component-router）应该可以使用$$路由器并将其绑定到子组件。

这是我尝试做的事情： http://plnkr.co/edit/KzW8fLAxrte9jSg5jhEg?p=preview

[bool] (Get-Mailbox abc@win.com).IsLinked

我在这个绑定主题上有一个类似的帖子：

Angular 1.5 component $router binding

Answer 1

据我所知，没有能力同时使用Angular 1.5 Component Router显示兄弟姐妹。

然而，解决方法是让兄弟姐妹实际上是孩子，然后使用空组件来默认显示，＆＃34;没有细节＆＃34;路由。

解决方法：

首先，我们需要一些根组件来激活列表本身：

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

然后我们需要为list，detail和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
})

访问父级：

另外，为了能够通知父级（在您的示例中 - 兄弟详细信息组件将其ID告知列表，并将列表标记为选中后），您可以使用 require 组件选项，以便能够访问父组件范围。

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

以示例编辑plunker。

PS：我使用了更新版本的路由器。

Angular 1.5组件路由器兄弟组件

1 个答案:

解决方法：

访问父级：