Question

我有一个工作系统，我可以从控制面板定义菜单项并将它们提取到多个位置。我想添加作为额外功能的是在创建新菜单项时刷新菜单（例如在侧边栏）。

简单地说，我希望在我的getMenu中运行SidebarComponent函数后，在我的addMenuItem中定义MenuComponent函数。

到目前为止，基于共享服务建议，我已经开始讨论了这个问题，但它无法正常工作：

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

感谢任何帮助。

Answer 1

如果您重新加入

，它会正常工作

... = this.getMenu;

通过

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

但是，在create（）中的HTTP调用成功后，从服务中的Observable发出事件会更加清晰，并在组件中订阅此Observable。

请注意，在您发送创建新请求的请求后，您当前的解决方案会立即获得新菜单。因此，这两个请求可能会由您的服务器并行处理，这可能会导致竞争条件。

Angular 4 - 非相关组件之间的交互

1 个答案: