angular 2: using a service to broadcast an event : <p>I'm trying to get a button click in one component to put focus on an element on another component. (Frankly, I don't understand why this must be so complex, but I have not been able to implement any simpler way that actually works.)</p>

<p>I'm using a service. It doesn't need to pass any data except <em>that</em> the click occurred. I'm not sure how the listening component is meant to respond to the event.</p>

<p>app.component:</p>

<p>Skip to main content</p>

<pre><code>import { Component } from '@angular/core';
import { SkipToContentService } from './services/skip-to-content.service';


export class AppComponent {
    constructor(
        private skipToContent: SkipToContentService
    ) {}
    }

    skipLink() {
        this.skipToContent.setClicked();
    }

}
</code></pre>

<p>login component:</p>

<pre><code>&lt;input type="text" name="username" /&gt;


import { Component, OnInit } from '@angular/core';
import { SkipToContentService } from '../../../services/skip-to-content.service';

export class BaseLoginComponent implements OnInit {

    constructor(
        private skipToContent: SkipToContentService
        ) {
    }

    ngOnInit() {
        this.skipToContent.skipClicked.subscribe(
            console.log("!")
            // should put focus() on input
        );

    }
}
</code></pre>

<p>skip-to-content.service:</p>

<pre><code>import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class SkipToContentService {

    skipClicked: EventEmitter&lt;boolean&gt; = new EventEmitter();


    constructor() {
    }

    setClicked() {
        console.log('clicked');
        this.skipClicked.emit();
    };
}
</code></pre>

<p>I'm  a bit lost here as to how logon will "hear" the skipClicked event.</p>
