Angular Service Broadcast无法与路由一起使用

在Service中订阅事件时，我可以访问它在另一个组件中发出的数据，但是当我尝试路由页面时，在路由过程开始后，正在ngOnInIt()中设置数据，将其设置为默认.该服务已在app.module.ts中注册，因此在整个应用程序中都是相同的.

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

这是应用程序的结构

应用程序结构

开发人员控制台映像