Angular2 – Interazione tra componenti che utilizzano un servizio

Ho due componenti A e B, dove il componente A contiene un pulsante. Vorrei che quando l’utente fa clic su questo pulsante, attivi una funzione sul componente B

  

E il componente B è reso utilizzando il routing. Sto considerando l’utilizzo di un servizio con un booleano osservabile che indica se si fa clic sul pulsante in A. È questo il modo giusto per raggiungerlo?

Il servizio condiviso è un modo comune di comunicazione tra componenti non correlati. I tuoi componenti devono utilizzare una singola istanza del servizio , quindi assicurati che sia fornita a livello di root.

Un esempio che utilizza BehaviorSubject come delegato di dati :

Servizio condiviso:

 @Injectable() export class SharedService { isVisibleSource: BehaviorSubject = 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 ricordare che BehaviorSubject su una sottoscrizione restituisce l’ultimo valore che detiene, pertanto il componente dell’esempio precedente verrà aggiornato con il valore più recente immediatamente dopo l’istanziazione.

BehaviorSubject consente anche di ottenere il suo valore più recente senza nemmeno iscriversi ad esso:

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

Servizio angular

Devi usare un servizio per comunicare tra i tuoi due componenti.

Vedi https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Il tuo servizio ha un evento di proprietà. Quindi il componente A può emettere l’evento e il componente B può iscriversi ad esso.

Usa RxJS per emettere e sottoscrivere il tuo evento.

Se la mia risposta non ti soddisfa. Per favore dimmelo e ci lavorerò sopra.