Question

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

该组件将发出一个事件，其中包含单击用户配方的索引。

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

}

此组件将订阅事件并显示有关食谱的详细信息。

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

这是我正在使用的服务文件

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

这是应用程序的结构

structure of the app

developer console image

Answer 1

您不应在服务中使用EventEmitter。组件和用户操作负责发出事件。话虽如此，您可以使用Subject / BehaviorSubject让您的服务发出提示。

请参见以下示例：

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

Angular Service Broadcast无法使用路由

1 个答案: