Angular 2: using a service to broadcast an event

Question

I am trying to get a button click in one component to focus on an element on another component. (Honestly, I don’t understand why it should be so complicated, but I could not implement any simpler way that really works.)

I use the service. He does not need to transfer any data except that a click has occurred. I'm not sure how the listening component should respond to the event.

app.component:

Skip to main content

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


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

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

}

input component:

<input type="text" name="username" />


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
        );

    }
}

pass to content.service:

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class SkipToContentService {

    skipClicked: EventEmitter<boolean> = new EventEmitter();


    constructor() {
    }

    setClicked() {
        console.log('clicked');
        this.skipClicked.emit();
    };
}

I lost a little here, as the login will “hear” the skipClicked event.

Answer 1

, BehaviorSubject EventEmitter. skipCliekd :

skipClicked: BehaviorSubject<boolean> = new BehaviorSubject(false);

, next() :

this.skipClicked.next (true);

:

 this.skipToContent.skipClicked.subscribe( value => {
     if (value === true) {
         console.log("!"); 
         // should put focus() on input 
     }
 });

Answer 2

EventEmitter @Output. .

Subject BehaviorSubject. angular .

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);
  }
}

---

:

, , - - , - Subject<void>(). next() , .

.

windowClosed = new Subject<void>();

windowClosed.next()