Question

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

内容的App-模板：

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

A＆＃39; content-app＆＃39;组件应该从路由组件接收事件（例如＆＃39; content-app-list＆＃39;）

<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。但是，该问题已经关闭，目前不支持该功能。基本上有三种选择：

共享服务
通过网址或查询参数传递数据
将父组件注入子组件的构造函数

第一种选择绝对是实现这一目标的最简洁方法。组件交互也有很好的article。但是，如果您使用Observables或Subjects for yor shared service，请确保妥善管理您的子目录。由于服务将是一个单身人士，它实际上将保持活力并在记忆中。

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

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 params 。

Angular2 Router-Outlet组件事件发送（A2＆gt; = v1.2.0）

1 个答案: