从子组件通过服务文件发出的数据未呈现在其父级的同级组件中

Question

子组件配方项目位于父组件配方列表中。配方列表组件具有同级组件配方细节组件。食谱列表和食谱细节组件是食谱组件的子组件。

如果我尝试从配方项目组件向配方细节组件发送/接收数据，反之亦然，事件和属性绑定工作正常。

我试图通过配方（父）组件内的服务文件在组件之间进行通信。我没有任何错误。但是，配方详细信息组件不会接收从配方项目组件发送的数据。

这可能是由于我的愚蠢错误。因此，任何帮助将不胜感激。

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../../recipe.model';
import { RecipesService } from '../../recipes.service';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {
  @Input() recipes: Recipe;
  constructor(private recService: RecipesService) { }

  ngOnInit() {
  }

  sendRecipe() {
    this.recService.recipeToEmit.emit(this.recipes);
  }

}

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

export class RecipesService {
    recipeToEmit = new EventEmitter<Recipe>();
    recipe: Recipe[] = [
        new Recipe('Chicken', 'Why Slow Roasted Chicken is Better Than Crispy Skin Roasted Chicken | Bon Appétit', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvwsB_bbp6JJZQdbe3xHdp2qU5HQMwWSvMf0QkeIJFtWXORDXK&s'),
        new Recipe('Pizza', 'Paneer Pizza', 'https://www.tasteofhome.com/wp-content/uploads/2017/10/Chicken-Pizza_exps30800_FM143298B03_11_8bC_RMS-2-696x696.jpg'),
        new Recipe('Shrimp', 'Easy Garlic Shrimp', 'https://shewearsmanyhats.com/wp-content/uploads/2015/10/garlic-shrimp-recipe-1b-480x270.jpg')
      ];  

      getRecipe() {
          return this.recipe.slice();
      }
}

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

@Component({
  selector: 'app-recipe',
  templateUrl: './recipe.component.html',
  styleUrls: ['./recipe.component.css'],
  providers: [RecipesService]
})
export class RecipeComponent implements OnInit {
  choosenRecipe: Recipe;
  constructor(private recService: RecipesService) { }

  ngOnInit() {
    this.recService.recipeToEmit
    .subscribe(
      (recipe: Recipe)=> {
        this.choosenRecipe = recipe;
      }
    );
  }

}

**Recipe-Component HTML file**
<div class="row">
    <div class="col-md-5">
        <app-recipe-list></app-recipe-list>
    </div>
    <div class="col-md-7">
        <app-recipe-detail *ngIf="choosenRecipe; else infoText" [recipeSelcted]="choosenRecipe"></app-recipe-detail>
        <ng-template #infoText>
            <p>Please select a Recipe!</p>
        </ng-template>
    </div>
</div>

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

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.component.html',
  styleUrls: ['./recipe-detail.component.css']
})
export class RecipeDetailComponent implements OnInit {
@Input() recipeSelcted: Recipe;
  constructor() { }

  ngOnInit() {
    console.log(this.recipeSelcted);
  }

}

**Recipe Detail component HTML file**
<div class="row">
    <div class="col-xs-12">
        <img src="{{recipeSelcted.imagePath}}" alt="{{recipeSelcted.name}}" class="img-responsive" style="max-height: 200px;">
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <h1>{{recipeSelcted.name}}</h1>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="btn-group" app-dropDown>
            <button class="btn btn-primary dropdown-toggle">Manage Recipe <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">To Shopping-List</a></li>
                <li><a href="#">Edit Recipe</a></li>
                <li><a href="#">Delete Recipe</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
            {{recipeSelcted.description}}
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        Ingredients
    </div>
</div>