Use @Output with of "angular 4.0"

Question

Use a selector to succeed.

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

But using a router will fail

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

I want to receive a value from a component displayed on the "router-outlet".

Please tell me what method I have.

app：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-->

you cannot create `@Output` variable to angular packages. What you mean by this line **"I want to receive a value from a component displayed on the router."** — Aravind, May 05 '17 at 04:30
Use a service https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service — eko, May 05 '17 at 04:43
>>Mr.Aravind 「you cannot create @Output variable to angular packages.」Why??? https://toparent.herokuapp.com/ 　Press the second displayed button.title is changed.@Output is working normally.But only selectors.I hope you will be able to provide the information. — くにあつ, May 05 '17 at 05:16
Possible duplicate of [Angular 2 output from router-outlet](http://stackoverflow.com/questions/37662456/angular-2-output-from-router-outlet) — AT82, May 06 '17 at 09:05

score 4 · Answer 1 · answered Jul 11 '18 at 18:31

You can define an @Output event emitter in the component being rendered at router-outlet. define router outlet as follows.

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

In your component you can do as so.

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

This way you can send the events to the component which is rendering router-outlet. This works because @Output event emitters are event streams and you can subscribe to those events.

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

Should I unsubscribe manually inside one of the Angular hooks? If I should, then in what hook? Thank you. — manymanymore, Jun 01 '20 at 18:48

Use @Output with of "angular 4.0"

1 Answers1