title: can eventEmitter work on router-outlet?
body: <p>I have  in my parent component, where I want to detect the emitted event.</p>
  
  <p>child.component.ts</p>
  
  <pre><code>@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&lt;String&gt; = new EventEmitter&lt;String&gt;();
  
      this.stateChanged.emit(this.state);
  </code></pre>
  
  <p>}</p>
  
  <p>parent.component.html</p>
  
  <pre><code>&lt;router-outlet (stateChanged)="onStateChange($event)"&gt;&lt;router-outlet&gt;
  </code></pre>
  
  <p>parent.component.ts</p>
  
  <pre><code>onStateChange(event){
      console.log(event);
  }
  </code></pre>
  
  <p>This doesn't work for me!</p>
  
  <p>The compiled HTML code looks like:</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;child-component&gt;
      // all child component code
  &lt;child-component&gt;
  </code></pre>
  
  <p>Is there any way to push <code>(stateChanged)="onStateChange($event)"</code> in <code>&lt;child-component&gt;</code> element?</p>
  
  <p>Can anyone help, please?</p>