angular2-如何在两个独立的组件之间进行通信？

Question

我正在研究这个angular2项目。 我有两个组件，即WorkspacesComponent & PagesComponent。

在数据库中，每个工作区包含多个页面。 我在下面编写了代码来填充workspacesComponent＆amp;中的工作空间列表。 PagesComponent中的页面列表。

从数据库中获取工作区

 this.workspaceService.getAllWorkspaces(this.baseUrl)
        .subscribe((workspaces) => {
            this.workspaces = workspaces;
            console.log(this.workspaces);
        }
        );

从数据库中获取网页

this.pagesService.getAllpages(this.baseUrl)
        .subscribe((pages) => {
            this.pages = pages;
            console.log(this.pages);
        }
        );

到目前为止，他们正在返回正确的数据。但我想实现我将在workspaceComponent＆amp;中选择工作区的功能。该工作区中的所有页面只应列在pagesComponent。

中

即，在点击工作空间时，其索引可以传递给下面的方法。

getPagesByWorkspaceId(index:string){
    console.log(index);
}

此方法将相应地加载该工作空间中的页面列表。 问题是我不确定如何从PagesComponent

调用WorkspacesComponent中的方法

任何输入？

Answer 1

对于非直接父子关系的组件之间的通信，请使用共享服务来共享数据并进行通信。

有关详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

如果两个组件之间没有关系（父/子），则需要利用共享服务。

有关详细信息，请参阅此问题：

• Angular 2 - Using Observables in a component to emit values to other components

来自angular doc的这个链接也可以帮助你：

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service