Angular2 路由器插座组件事件发出 (A2 >= v1.2.0)

Question

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

content-app-template：

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

a'content-app'组件应从路由组件（例如'content-app-list'）接收事件

<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也存在一个问题。但是，该问题已关闭，目前不支持该功能。基本上有三个选项：

1. 共享服务
2. 通过URL或查询参数传递数据
3. 将父件注入孩子的构造函数

第一个选择绝对是实现这一目标的最干净的方法。还有一篇关于组件交互的非常好的文章。但是，如果您使用可观察到的您共享服务，请确保很好地管理您的子标记。由于该服务将是单身人士，它实际上将保持活力和记忆。

第二个选项也是我要说的有效方法。通过注入ActivatedRoute，您甚至可以订阅参数，因为路由器也利用可观察到的。您可以按以下方式实施：

constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
  this.paramSubscription = this.activatedRoute.params.subscribe(...);
}
ngOnDestroy() {
  this.paramSubscription .unsubscribe();
}

您可以看到，您要做的就是注入ActivatedRoute，然后订阅ngOnInit生命周期钩中的参数。如前所述，请确保在ngOnDestroy中取消订阅。

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

constructor(private _parentComponent: ParentComponent)

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

最重要的是，我建议您使用共享服务或 url/QUERY参数如果可能的话。