Angular2路由器插座组件事件发送（A2> = v1.2.0）

Question

我想从我的路由组件接收事件并将数据从父组件传递到它们中。

内容的应用程序，模板：

<router-outlet [data]='data' (selected)="selected($event)"></router-outlet> //this is not working 

A“内容的应用程序”组件应该接收来自路由组件事件（如“内容的应用程序清单”）

<content-app> // this is where the events should arrive 
    <content-app-header></content-app-header> 
    <router-outlet></router-outlet>  
    <content-app-list></content-app-list> //this is a routed component, that emits events and should bind data 
</content-app> 

我可以实现处理数据的服务，但我更喜欢框架概念。

Answer 1

截至目前，您无法直接将数据传递给路由组件。从2015年起，GitHub上还有一个issue。但是，该问题已关闭，该功能目前不受支持。基本上有三种选择：

1. 共享服务
通过URL或查询
2. 将数据传递PARAMS
3. 进样父组件到孩子的构造

的第一选择肯定是实现这一目标的最彻底的方法。在组件交互方面也有非常好的article。但是，如果您使用观察对象或主题进行共享服务，请务必妥善管理您的描述。由于该服务将是一个单身人士，它将实际上保持活着并在记忆中。

第二种选择也是我想说的有效方法。通过注入ActivatedRoute，您甚至可以订阅参数，因为路由器也使用Observables。您可以实现此如下：

constructor(private activatedRoute: ActivatedRoute) { } 

ngOnInit() { 
    this.paramSubscription = this.activatedRoute.params.subscribe(...); 
} 

ngOnDestroy() { 
    this.paramSubscription .unsubscribe(); 
} 

正如你所看到的，所有你需要做的就是注入ActivatedRoute，然后订阅在ngOnInit生命周期挂钩的PARAMS。如上所述，请务必在ngOnDestroy退订。

第三个选项是通过DI注入父组件到您的子组件。

constructor(private _parentComponent: ParentComponent) 

然后，您可以调用方法并从父组件获取数据。请注意，该类型的第一个父级正在被注入。

底线是，我会建议你使用如果可能的话共享服务或网址/查询参数。