angular 2: using a service to broadcast an event
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
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
}
});