javascript - Share Data Between Component

Question

I want to share data between component using service. But It not working as expected.

Component

let myNum = 1;
sendChanges(myNum) {
    this.breadService.sendData$.next(myNum);
}

Service

public sendData$: Subject<any> = new Subject();
public setValue$: BehaviorSubject<any> = new BehaviorSubject(this.data);

Sibling COmponent

ngOnInit() {
    this.breadService.sendData$.subscribe(() => {
        this.breadService.setValue$.subscribe(data=>{
            this.id = data
            console.log(this.id);
        });
    });
}

Answer 1

Here sendData$ is a Subject. Subscription callbacks to a Subject aren't executed till it emits a new value. So the inner subscription wouldn't be executed till a new value is pushed to sendData$ after it is subscribed to. You could change the outer observable too to a BehaviorSubject to assign the value in the subscription immediately.

Service

private sendDataSource: BehaviorSubject<any> = new BehaviorSubject(null);
private setValueSource: BehaviorSubject<any> = new BehaviorSubject(this.data);

public set sendData(data) {
  this.sendDataSource.next(data);
}

public set setValue(value) {
  this.setValueSource.next(value);
}

public get sendData() {
  return this.sendDataSource.asObservable();
}

public get setValue() {
  return this.setValueSource.asObservable();
}

Also a subscription within a subscription isn't elegant. Pipe the outer observable.

Sibling Component

import { pipe } from 'rxjs';
import { switchMap } from 'rxjs/operators';

ngOnInit() {
  this.breadService.sendData.pipe(switchMap(() => this.breadService.setValue))
    .subscribe(data => {
      this.id = data
      console.log(this.id);
    });
}