Angular Service Broadcast not working with routing

问题

When subscribed to an event in Service, I can access the data it emits in another component, But when I am trying to route the page the data is being set in ngOnInIt() after the routing process starts it is being set to default. The service is registered in app.module.ts so it is same across the app.

This component will emit an event with the index of the recipe user clicked.

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../../files/recipe.model';
import { recipeService } from '../../files/recipe.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-recipeitem',
  templateUrl: './recipeitem.component.html',
  styleUrls: ['./recipeitem.component.css'] 
})
export class RecipeitemComponent implements OnInit {

  @Input() index : number;
  item : Recipe; 
  constructor(private recpSer : recipeService , private router : Router) { 
  }
  ngOnInit() {
    this.item = this.recpSer.getSpecificItem(this.index);
  }
  clicked(){
    console.log("In recipe item component "+this.item.name);
    this.router.navigate(['/recipebook','recipedetail']);
    this.recpSer.recipeSelected.emit(this.index);
  } 

}

This component will subscribe to the event and displays the details about the recipe.

import { Component, OnInit } from '@angular/core';
import { Recipe } from '../files/recipe.model';
import { recipeService } from '../files/recipe.service';

@Component({
  selector: 'app-recipedetail',
  templateUrl: './recipedetail.component.html',
  styleUrls: ['./recipedetail.component.css']
})
export class RecipedetailComponent implements OnInit {
  recipe_detail : Recipe;
  itemIndex : number;

  constructor(private recpSer : recipeService) { }

  ngOnInit() {
  this.recpSer.recipeSelected.subscribe(
     (index:number) => {
        console.log('In the recipedetail '+index+' fergerg');
        this.itemIndex = index;
        this.recipe_detail=this.recpSer.getSpecificItem(this.itemIndex);
        console.log('In recipedetail after assign '+this.recipe_detail.name);
     }
   );    
  } 
}

This is the service file I am using

import { Recipe } from './recipe.model'
import { EventEmitter } from '@angular/core';

export class recipeService{

private recipe_array : Recipe[] = [new Recipe('Recipe1','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe2','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe3','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe4','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe5','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe6','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe7','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe8','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg'),
new Recipe('Recipe9','Sample recipe','https://upload.wikimedia.org/wikipedia/en/d/d5/Hotdog_three.jpg')];

recipeSelected = new EventEmitter<number>();

add_recipe (item : Recipe){
    this.recipe_array.push(item);
}
getRecipeCopy(){
    return this.recipe_array.slice();
}
updateRecipe(index:number, item: Recipe){

}
getSpecificItem(index:number){
    return this.recipe_array[index];
}
getRecipeRef(){
    return this.recipe_array;
}
}

This is the structure of the app

structure of the app

developer console image

回答1:

You should not be using EventEmitter in the service. Components and user action is responsible for emitting an event. Having said that, you can have your service emit chnages using Subject/BehaviorSubject.

see example below:

private recipeSubject = new BehaviorSubject<number>(0);
public recipeSelected = this.recipeSubject.asObservable();

add_recipe (item : Recipe){
  this.recipe_array.push(item);
  this.recipeSubject.next(this.recipe_array.length);
}

来源：https://stackoverflow.com/questions/51587395/angular-service-broadcast-not-working-with-routing