Question

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

如何让表组件监听两个菜单组件中的属性更改？

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

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

Answer 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将调用服务的setter：

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

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

希望它有所帮助。

Angular 2组件到组件通信

1 个答案: