angular2-如何在两个单独的组件之间进行通信？ [英] angular2- how to communicate between two separate components?

问题描述

我正在研究这个angular2项目。
我有2个组件，即 WorkspacesComponent&数据库中的PagesComponent 。

，每个工作区都包含页数。
我已经写下面的代码来填充工作区中的工作空间列表Component& PagesComponent中的页面列表。

从数据库获取工作区

  this.workspaceService.getAllWorkspaces（this.baseUrl）
 .subscribe（（workspaces）=> {
 this.workspaces = workspaces; 
 console.log（this。工作空间）; 
} 
）; 
  

从数据库获取页面

  this.pagesService.getAllpages（this.baseUrl）
 .subscribe（（pages）=> {
 this.pages = pages; 
 console.log（this.pages）; 
} 
）; 
  

到目前为止，他们正在返回正确的数据，但是我想实现我将会在 workspaceComponent &该工作区中的所有页面应仅列在 pagesComponent 中。

角度文档也可以帮助您：

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

I am working on this angular2 project. I have 2 components i.e. WorkspacesComponent & PagesComponent.

in database,each workspace contains number of pages. I have written below code to populate list of workspaces in workspacesComponent & list of pages in PagesComponent.

getting workspaces from database

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

getting pages from databases

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

so far , they are returning me correct data.but I want to implement the functionality where I will be selecting workspace in workspaceComponent & all the pages in that workspace only should be listed in pagesComponent.

that is, on click of workspace, its index can be passed to below method.

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

and this method will load the list of pages in that workspace accordingly. the problem is that I am not sure how to call a method in PagesComponent from WorkspacesComponent

any inputs?

解决方案

If there is no relation (parent/child) between your two components, you need to leverage a shared service.

See this question for more details:

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

This link from the angular doc could also help you:

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

这篇关于angular2-如何在两个单独的组件之间进行通信？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！