Subject is not working when route navigating from one component to another component in Angular 6

Question

I have Component A, Component B, and a service. I declared Subject in the service and subscribed the Subject in component B., And I'm sending some data from Component A to the Subject before navigating to component B. It is navigating to component B, but the Subscribe method is not triggering.

Service:

@Injectable({
  providedIn: 'root'
})
export class ServiceTestService {
storage: Recipe;
recipeSelected = new Subject<any>();
constructor() { }

}

Component A Sending the message to observable

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html'
 })

export class RecipeItemComponent implements OnInit {

@Input() recipe: Recipe;

  constructor(
     private recipeService: ServiceTestService,
     private rt: Router) { }

  ngOnInit() {
  }

  onRecipeSelected(name: number) {

this.recipeService.recipeSelected.next(this.recipe);
this.rt.navigate(['/recipe', this.ind]);

  }
}

Component B: Here I subscribed the Observable.

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.component.html',
  styleUrls: ['./recipe-detail.component.css']
  })

export class RecipeDetailComponent implements OnInit, OnDestroy {
  recipe: Recipe;

  constructor(private recipeService: ServiceTestService) { }

ngOnInit() {

this.recipeService.recipeSelected.subscribe(

  (res: any) => {
    console.log(`Recipe Component ${res}`); }
);

}

}

It's navigating from Component A to Component B but the subscribe method is not triggering in Component B. Please suggest.

Amit Chigadani · Answer 1 · 2019-02-11T15:39:02.577

7

Use BehaviorSubject instead, so that you always get the current value (latest) that was emitted before the new subscription.

If you are using Subject, then you only get values that are emitted after subscription.

export class ServiceTestService {
   storage: Recipe;
   recipeSelected = new BehaviorSubject<any>();
   constructor() { }
}

Diff between Subject and BehaviorSubject

edited Feb 11 '19 at 15:39

answered Feb 11 '19 at 15:32

Amit Chigadani

28,482
13
80
98

Thanks for the idea Amit. In my case, ReplaySubject(1) is working. – Sunilkumar Mandati Feb 12 '19 at 13:47
Yes, both are almost similar whereas in `ReplaySubject` you can get last `n` values but only one or a default value with `BehaviorSubject`.. – Amit Chigadani Feb 12 '19 at 14:00
@AmitChigadaniL:can you explain me sir why value is not recevied in case of subject? – Kapil Soni May 05 '20 at 14:10
@Kapilsoni Please go through the link provided in the answer to understand better – Amit Chigadani May 05 '20 at 14:12

score 2 · Accepted Answer · edited Feb 12 '19 at 14:00

2

Thanks for the Idea @Amit. I used ReplaySubject(1) and it is working perfectly.

recipeSelected = new ReplaySubject<any>(1);

edited Feb 12 '19 at 14:00

Amit Chigadani

28,482
13
80
98

answered Feb 12 '19 at 13:48

Sunilkumar Mandati

179
10

Subject is not working when route navigating from one component to another component in Angular 6

2 Answers2

Linked