Angular 4 - Interaktion zwischen nicht verwandten Komponenten

Question

Ich habe ein funktionierendes System, in dem ich Menüpunkte von meinem Control Panel definieren und sie an mehrere Stellen holen kann. Was ich als zusätzliches Feature hinzufügen möchte, ist das Aktualisieren der Menüs (z. B. in der Seitenleiste), wenn ich einen neuen Menüeintrag erstelle.

einfach, ich will getMenu Funktion definiert in meinem SidebarComponent nach addMenuItem Funktion in meinem MenuComponent ausgeführt laufen.

Bisher habe ich so weit kommen, basierend auf einem Shared Service Vorschlag, aber es funktioniert nicht:

MenuService:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Injectable() 
export class MenuService { 
    sidebarRefresh: Function; 

    constructor (private http: Http) {} 

    create(): void { 
     return this.http.post(url, JSON.stringify(data); 
    } 
} 

MenuComponent:

import { Component } from '@angular/core'; 
import { MenuService } from './menu.service'; 

@Component() 

export class MenusComponent { 
    constructor(
     private menuService: MenuService, 
    ) { } 

    addMenuItem(): void { 
     this.menuService.create(data); 

     this.menuService.sidebarRefresh(); 
    } 

SidebarComponent :

import { Component } from '@angular/core'; 
import { Menu } from '../menu/menu'; 
import { MenuService } from '../menu/menu.service'; 

@Component() 

export class SidebarComponent { 
    menus: Menu[]; 

    constructor(
     private menuService: MenuService 
    ) { 
     this.menuService.sidebarRefresh= this.getMenu; 
    } 

    ngOnInit() { 
     this.getMenu(); 
    } 

    getMenu() { 
     this.menuService.getSidebarMenu() 
      .subscribe(
       menus => this.menus = menus, 
       error => this.errorMessage = <any>error); 
    } 
} 

Jede Hilfe ist willkommen.

Answer 1

Es würde funktionieren, wenn Sie

relaced

... = this.getMenu; 

von

... =() => this.getMenu(); 

Aber es wäre viel sauberer sein, um ein Ereignis aus einer beobachtbaren im Dienst zu emittieren, nachdem der HTTP-Aufruf in create() ist gelungen, und dieses Observable in der Komponente zu abonnieren.

Beachten Sie, dass Ihre aktuelle Lösung das neue Menü sofort erhält, nachdem Sie die Anforderung gesendet haben, eine neue zu erstellen. Daher werden die beiden Anfragen wahrscheinlich parallel von Ihrem Server bearbeitet, was zu einer Wettlaufsituation führen kann.