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 - 非相关组件之间的相互作用

回答

相关问题