Подписка на событие, созданное и отправленное из сервиса

Question

Я пытаюсь подписаться на событие с компонентом, чтобы получить данные о событии, которое отправляется из службы, которую я создал. Я очень новичок в Angular, и я изо всех сил пытаюсь обдумать это! Когда пользователь выбирает рецепт из списка рецептов, должен отображаться полный рецепт (включая ингредиенты). В данный момент я записываю выбранный рецепт на консоль, но я просто получаю конструктор, который я сделал в файле модели

Вот рецепты. html файл:

<div *ngFor="let recipe of recipes" class="list-item">
    <a 
    href="#"
    class="list-group-item clearfix"
    (click)="onRecipeSelected(recipe)">
    <img 
        [src]="recipe.imagePath" 
        alt="{{ recipe.name }}"
        class="img-responsive">
    <div class="pull-left">
        <h4 class="list-group-item-heading item-text">{{ recipe.name }}</h4>
        <p class="list-group-item-text item-text">{{ recipe.description }}</p>
    </div>
</a>
</div>  

вот файл recipes.ts:

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

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

  constructor(private recipeService: Recipeservice) {}

 onRecipeSelected(recipe: Recipe) {
    this.recipeService.RecipeSelected.emit(recipe);
    console.log(Recipe);
}

  ngOnInit() {
    this.recipes = this.recipeService.getRecipes();
  }

}

вот файл recipes.service:

import { Recipe } from './recipes.model';
import { Ingredient } from '../shared/ingredient.model';
import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';

@Injectable()
export class Recipeservice {

RecipeSelected = new EventEmitter<Recipe>();


    private recipes: Recipe[] = [
        new Recipe('Spaghetti Carbonara', 'Authentic Italian Carbonara', 'https://d1doqjmisr497k.cloudfront.net/-/media/schwartz/recipes/2000x1125/easy_spaghetti_carbonara_2000.jpg?vd=20180522T020207Z&hash=9B103A2DB3CDCB31DB146870A3E05F9856C051A2', [
            new Ingredient('Spaghetti', 500),
            new Ingredient('Lardons', 20),
            new Ingredient('egg', 4),
            new Ingredient('parmesan', 100),
            new Ingredient('Garlic', 1),
            new Ingredient('Olive Oil', 50)
        ]),

        new Recipe('Lasagne', 'Mums lasagne recipe', 'https://img.taste.com.au/bBe9SZ5Q/taste/2016/11/cheesy-beef-and-spinach-lasagne-45846-1.jpeg', [
            new Ingredient('Spaghetti', 500),
            new Ingredient('Lardons', 20),
            new Ingredient('egg', 4),
            new Ingredient('parmesan', 100),
            new Ingredient('Garlic', 1),
            new Ingredient('Olive Oil', 50)
        ])
    ];



        getRecipes() {
            return this.recipes.slice();
        }

}

Это файл recipe-view.ts (где я подписываюсь на событие):

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

@Component({
  selector: 'app-recipe-view',
  templateUrl: './recipe-view.component.html',
  styleUrls: ['./recipe-view.component.css'],
  providers: [Recipeservice]
})
export class RecipeViewComponent implements OnInit {
  selectedRecipe: Recipe;

  constructor(private recipeService: Recipeservice) { }

  ngOnInit() {
    this.recipeService.RecipeSelected.subscribe(
      (recipe: Recipe) => {
        this.selectedRecipe = recipe;
console.log(this.selectedRecipe);
      }
    );
  }

}

И, наконец, просмотр рецепта. html file:

<div class="recipe-full-view">
    <h4 class="list-group-item-heading">{{ selectedRecipe.name }}</h4>
    <p class="list-group-item-text">{{ selectedRecipe.description }}</p>
</div>
<ul class="Ingredients-list">
    <li class="Ingredients-list-item"
    *ngFor="let Ingredient of selectedRecipe.ingredients">
    {{ Ingredient.name }} - {{ Ingredient.amount }}
</li>
</ul>

Любая помощь, которую вы можете мне оказать, будет принята с благодарностью, так как я чувствую себя немного потерянным прямо сейчас! PS «Новый рецепт» взят из файла модели, который я не включил, так как не чувствовал, что он уместен.

Answer 1

В вашем recipes.html вы должны вызвать метод с именем onRecipeSelected():

<div *ngFor="let recipe of recipes" class="list-item">
    <a href="#" ... (click)="onRecipeSelected(recipe)">
    ...

в recipes.ts, вызвать метод RecipeService для выбора рецепта:

export class RecipesComponent implements OnInit {
  ...

  onRecipeSelected(recipe: Recipe) {
    this.recipeService.selectRecipe(recipe);
  }
}

Я предлагаю вам некоторые улучшения в вашем коде, особенно в RecipeService, используя BehaviorSubject вместо EventEmitter:

@Injectable()
export class RecipeService {
  private recipes = [....];

  selectedRecipe$ = new BehaviorSubject<Recipe>(null);
  recipes$ = new BehaviorSubject<Recipe[]>(this.recipes);

  selectRecipe(recipe: Recipe) {
    this.selectedRecipes.next(recipe);
  }
}

Так что ваш код RecipeViewComponent можно изменить to:

export class RecipeViewComponent implements OnInit {
  selectedRecipe$: Observable<Recipe>;

  constructor(private recipeService: RecipeService) { }

  ngOnInit() {
    this.selectedRecipe$ = this.recipeService.selectedRecipe$;
  }
}

Я сделал упрощенную демонстрацию Stackblitz для вашего случая использования. Это демонстрирует использование Observable и BehaviorSubject.