时间戳

首页 > 解决方案 > 从另一个对象注册一个对象的属性更改

javascript - 从另一个对象注册一个对象的属性更改

问题描述

在我的项目中，我有一个widgetBar可以包含一个或多个widgets。

单击 widgetBar 中的小部件图标时，会打开一个面板以显示按下的小部件的内容（一种带有所有下拉菜单的导航栏）。

每个widget类都有一个togglePanel()绑定到小部件图标上的 onlcick 事件并打开/关闭面板的方法。此方法还将小部件的isActive属性设置为true（当面板打开时）或false（当面板关闭时）。

class Widget {
    isActive: boolean = false;
    element: HTMLElement;
    id: string;

    constructor(id: string) {
        this.id = id;
        this.element = document.crateElement('DIV');
        // ... this.element and other things represent the widget DOM object
        this.element.onclick = this.togglePanel.bind(this);
    }

    togglePanel() {
        if (this.panel.classList.contains('active')) {
            this.openPanel();
            this.isActive = true;
        } else {
            this.closePanel();
            this.isActive = false;
        }
    }
}

构造WidgetBar函数将widgets 列表作为参数，成为它的this.widgets属性。它还有一个getWidgets()方法可以访问此属性。

class WidgetBar {
    private widgets: Widget[];

    constructor(widgets: Widget[]) {
        this.widgets = widgets;
    }

    getWidgets() {
        return this.widgets;
    }
}

（我的项目的）规则是，每当一个小部件打开它的面板时，所有其他面板都应该关闭。

我如何自动检查WidgetBar其中一个是否widget已更改其isActive属性，以便我可以确保一次打开的面板不超过一个？

我读到了Proxy，但我不确定这是否可以帮助我解决这个问题。

编辑

Observables呢？

isActive将类的属性设为WidgetObservable 并订阅WidgetBar以侦听任何更新是否是个好主意，就像在这个答案中解释的那样？

标签： javascripttypescriptdesign-patternses6-proxy

解决方案

您可以让小部件在打开时发出一个事件。小部件栏的工作是执行“规则”。当它收到一个新的打开事件时，您可以让它在所有其他子小部件上调用 close（通过 ViewChild/ViewChildren）。

或者，您可以将逻辑移出组件并拥有一个负责所有逻辑的服务。该服务可以通过 rxjs 可订阅将小部件及其属性（例如活动）公开给小部件栏。

推荐阅读