Angular 4 - 非相關組件之間的相互作用

我有一個工作系統，可以從我的控制面板定義菜單項並將它們提取到多個位置。當我創建一個新的菜單項時，我想添加的額外功能是刷新菜單（例如在側邊欄）。Angular 4 - 非相關組件之間的相互作用

簡單地說，我想在我的MenuComponent運行在我SidebarComponent定義getMenu功能，之後addMenuItem功能運行。

到目前爲止，我來到了這個的基礎上，共享服務的建議，但它不工作：

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

任何幫助表示讚賞。

來源

2017-05-25 yenerunver

你在哪裏可以提供這項服務？什麼是'getSidebarMenu（）'？ 'sidebarRefresh'函數看起來像什麼？請添加所有相關信息。 – echonax

我的猜測是，如果你通過'=（）=> this.getMenu（）'來關聯'= this.getMenu'，它就可以正常工作。但是，在HTTP調用create（）成功並在組件中訂閱此Observable後，從服務中的Observable發出事件會更清晰。 –

你是一個救星@JB Nizet – yenerunver

這將正常工作，如果你relaced

... = this.getMenu;

通過

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

但它會更清潔發出從可觀察的事件在以後的服務中HTTP調用中創建（）已經成功了，並且在組件中訂閱了這個Observable。

請注意，您發送請求以創建新的請求後，您當前的解決方案會立即獲得新菜單。所以這兩個請求可能會由您的服務器並行處理，這可能會導致競爭條件。

來源

2017-05-25 11:55:04

謝謝@JB Nizet，我把觸發器放在**然後**屬性中。 – yenerunver

Angular 4 - 非相關組件之間的相互作用

回答

相關問題