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

Question

使用选择器成功。

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

但是使用路由器会失败

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

我想从“路由器插座”上显示的组件接收一个值。

请告诉我我有什么方法。

应用程序？https://toparent.herokuapp.com/ src: 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