Angular2: interacción entre componentes que utilizan un servicio

typescript angular2-routing

Question

Tengo dos componentes A y B, donde el componente A contiene un botón. Deseo que cuando el usuario haga clic en este botón, active una función en el componente B

<A></A>
<router-outlet></router-outlet>

Y el componente B se representa mediante el enrutamiento. Estoy considerando utilizar un servicio con un valor booleano observable que indique si se hace clic en el botón de A. ¿Es esta la forma correcta de lograrlo?

Answer 1

Servicio angular

Debe utilizar un servicio para comunicarse entre sus dos componentes.

Ver angular.io/docs/ts/latest/cookbook/…

Su servicio tiene un evento de propiedad. Entonces el componente A puede emitir el evento y el componente B puede suscribirse a él.

Use RxJS para emitir y suscribirse a su evento.

Si mi respuesta no te satisface. Por favor dígame y trabajaré en ello.

Answer 2

El servicio compartido es una forma común de comunicación entre componentes no relacionados. Sus componentes necesitan usar una sola instancia del servicio , así que asegúrese de que se proporcione a nivel raíz.

Un ejemplo que usa BehaviorSubject como delegado de datos :

Servicio compartido:

@Injectable()
export class SharedService {

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

    constructor() { }
}

Componente 1:

export class Component1 {

    isVisible: boolean = false;

    constructor(private sharedService: SharedService) { }

    onClick(): void {
        this.isVisible = !this.isVisible;
        this.sharedService.isVisibleSource.next(this.isVisible);
    }
}

Componente 2:

export class Component2 {

    constructor(private sharedService: SharedService) { }

    ngOnInit() {
        this.sharedService.isVisibleSource.subscribe((isVisible: boolean) => {
            console.log(''isVisible: '', isVisible); // => true/false
        });
    }
}

Vale la pena mencionar que BehaviorSubject en una suscripción devuelve el último valor que posee, por lo tanto, el componente del ejemplo anterior se actualizará con el valor más reciente inmediatamente después de la instanciación.

BehaviorSubject también permite obtener su valor más reciente sin siquiera suscribirse a él:

this.sharedService.isVisibleSource.getValue(); // => true/false