I want to share data between ponent 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);
        });
    });
}

I want to share data between ponent 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);
        });
    });
}

• javascript
• angular
• typescript

Share Improve this question Follow edited May 14, 2020 at 19:53 Antoni Silvestrovič 1,03599 silver badges2525 bronze badges asked May 14, 2020 at 19:49 PravuPravu 60811 gold badge1010 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

Seems like you have redundant variable and subscription

Component

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

Service

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

Sibling ponent

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