Angular 1.5 组件路由器兄弟组件

Posted 2023-02-23

【中文标题】Angular 1.5 组件路由器兄弟组件

【英文标题】：Angular 1.5 component router sibling components

【发布时间】：2016-09-19 08:46:21

【问题描述】：

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

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

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

我有一篇关于这个绑定主题的类似帖子：

Angular 1.5 component $router binding

【参考方案1】：

据我所知，Angular 1.5 组件路由器无法同时显示兄弟姐妹。

但是，解决方法是让兄弟姐妹成为真正的孩子，然后使用空组件显示默认的“无详细信息”路由。

解决方法：

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

.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
)

访问父级：

此外，为了能够通知父级（在您的示例中 - 兄弟 Detail 组件告诉它 ID 到 List，然后 List 将其标记为选中），您可以使用 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：我使用的是更新版本的路由器。