angular - 将 @Output 与 "angular 4.0"的 <router-outlet> 一起使用

Question

使用选择器获得成功。

<app-child1 (onVoted)="onVoted($event)"></app-child1>

但是使用路由器会失败

<router-outlet  (onVoted)="onVoted($event)"></router-outlet>

我想从“router-outlet”上显示的组件接收值。

请告诉我我有什么方法。

应用程序: https://toparent.herokuapp.com/ 来源:https://github.com/kuniatsu/routerQuestion

<h1>
  {{title}}
</h1>
<a href="c1">child1</a>
<router-outlet  (onVoted)="onVoted($event)"></router-outlet><!--fail-->
<hr />
<app-child1 (onVoted)="onVoted($event)"></app-child1><!--success-->

Answer 1

您可以在路由器导出处渲染的组件中定义一个@Output 事件发射器。 定义路由器导出如下。

*.html
<router-outlet (activate)="onActivate($event)"></router-outlet>

在您的组件中，您可以这样做。

onActivate(elementRef) {
    elementRef.<the @Output eventEmitter>.subscribe(event => {
        console.log(event);
    });
}

通过这种方式，您可以将事件发送到正在渲染路由器导出的组件。这是可行的，因为@Output 事件发射器是事件流，您可以订阅这些事件。

https://angular.io/api/router/RouterOutlet