Angular Service Broadcast无法与路由一起使用 [英] Angular Service Broadcast not working with routing

问题描述

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

这是应用程序的结构

应用程序结构

开发人员控制台映像

推荐答案

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

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.

请参见以下示例:

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无法与路由一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！