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

问题

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.

回答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

回答2:

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

recipeSelected = new ReplaySubject<any>(1);

来源：https://stackoverflow.com/questions/54633820/subject-is-not-working-when-route-navigating-from-one-component-to-another-compo

标签

angular

subject