在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.

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

}

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

  }
}

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.

Answer 1

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

Answer 2

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

recipeSelected = new ReplaySubject<any>(1);