Angular 1.5 组件路由器兄弟组件
Posted
技术标签:
【中文标题】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:我使用的是更新版本的路由器。
【讨论】:
以上是关于Angular 1.5 组件路由器兄弟组件的主要内容,如果未能解决你的问题,请参考以下文章