angular 2: using a service to broadcast an event
First of all, use a BehaviorSubject
instead of EventEmitter
. Change the declaration of skipCliekd
to the following:
skipClicked: BehaviorSubject<boolean> = new BehaviorSubject(false);
Then, you need to broadcast the new value using next()
method as following:
this.skipClicked.next (true);
Also, change your subscription to:
this.skipToContent.skipClicked.subscribe( value => { if (value === true) { console.log("!"); // should put focus() on input } });
EventEmitter should only be used in an actual component with an @Output directive. Anything else may not work in future.
For child-parent communication it is better to use a Subject or BehaviorSubject. This is an example from the angular guide.
https://angular.io/guide/component-interaction
@Injectable()export class MissionService { // Observable string sources private missionAnnouncedSource = new Subject<string>(); private missionConfirmedSource = new Subject<string>(); // Observable string streams missionAnnounced$ = this.missionAnnouncedSource.asObservable(); missionConfirmed$ = this.missionConfirmedSource.asObservable(); // Service message commands announceMission(mission: string) { this.missionAnnouncedSource.next(mission); } confirmMission(astronaut: string) { this.missionConfirmedSource.next(astronaut); }}
Tip:
If you have an event that just signifies something has occurred or completed - and has no actual data associated with it - you can use a Subject<void>()
. This makes the signature of next()
cleaner and you don't need to provide a dummy value for the sake of it.
Eg.
windowClosed = new Subject<void>();
windowClosed.next()
will emit the event