angular 2: using a service to broadcast an event angular 2: using a service to broadcast an event angular angular

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