Angular 2 组件到组件的通信答案

【问题标题】：Angular 2 component to component communicationAngular 2 组件到组件的通信
【发布时间】：2016-06-01 22:18:36
【问题描述】：

我有一个显示模型列表的顶部菜单（组件）和一个显示颜色列表的侧菜单（组件）。在我的页面中心，我有一个表格（组件），它根据用户选择的颜色和模型控件显示事物列表。没有一个控件是任何其他控件的子控件。表格组件在路由器出口容器中呈现。

如何让表格组件监听两个菜单组件的属性变化？

我已经尝试过这里描述的会话服务：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-servicehttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

它不起作用，因为表格组件不是菜单组件的子组件。

【问题讨论】：

标签： angular

【解决方案1】：

我会为它做简单的服务：

@Injectable()
export class FilterService {
    public modelChange$:EventEmitter;
    public colorChange$:EventEmitter;

    constructor(){
        this.modelChange$ = new EventEmitter();
        this.colorChange$ = new EventEmitter();
    }

    public setModel(model):void{
        this.modelChange$.emit(model);
    }

    public setColor(color):void{
        this.colorChange$.emit(color);
    }
}

然后 TopMenuComponent 和 SideMenuComponent 将调用服务的设置器：

constructor(private _filterService:FilterService){}
// method invoked by user's action
onSelect(value) {
    this._filterService.setModel(value); // or setColor()
}

TableComponent 将订阅这些事件：

constructor(private _filterService:FilterService){
    this._filterService.modelChange$.subscribe(model => console.log("new model: " + model));
    this._filterService.colorChange$.subscribe(color => console.log("new color: " + color));
}

我用我的室内艺术家来展示它是如何工作的：

希望对您有所帮助。

【讨论】：