can eventEmitter work on router-outlet?

Question

I have in my parent component, where I want to detect the emitted event.

child.component.ts

@Component({
    selector: 'child-component',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.scss']
})   
export class ChildComponent implements OnInit { 

    @Input() public state: String = 'CLOSED';

    @Output() public stateChanged: EventEmitter<String> = new EventEmitter<String>();

    this.stateChanged.emit(this.state);

}

parent.component.html

<router-outlet (stateChanged)="onStateChange($event)"><router-outlet>

parent.component.ts

onStateChange(event){
    console.log(event);
}

This doesn't work for me!

The compiled HTML code looks like:

<router-outlet></router-outlet>
<child-component>
    // all child component code
<child-component>

Is there any way to push (stateChanged)="onStateChange($event)" in <child-component> element?

Can anyone help, please?

Answer 1

<router-outlet></router-outlet> considered to be a placeholder with the purpose of adding routed components. It does not have support to any kind of bindings.

But there is an update to <router-outlet></router-outlet> with an event that allows getting added component : Source

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>

This helps to communicate with getters, setters and methods through componentAdded()

The preferred way is to use a shared service check these links to create shared services

1) Angular Doc

2) Create shared service angular

3) Example1 Example2