如何在 Vaadin Flow 的组件中填充属性的更改？

Question

我有以下 class 一个可见的小旋转器：

@Tag("granite-spinner")
@NpmPackage(value = "@granite-elements/granite-spinner", version = "3.0.0")
@JsModule("@granite-elements/granite-spinner/granite-spinner.js")
public class BusyComponent extends Component implements HasEnabled {
    @Override
    public void onEnabledStateChanged(boolean enabled) {
        getElement().setProperty("active", enabled);
    }
}

在我的 MainView 中调用：

@Route("")
@PWA(name = "Project Base", shortName = "Project Base")
@Push
public class MainView extends VerticalLayout implements PageConfigurator {
    public MainView() {
        UI currUI = UI.getCurrent();
        final BusyComponent bc = new BusyComponent();
        final Button button = new Button("Click me");
        button.addClickListener(event -> {
            button.setEnabled(false);
            bc.setEnabled(true);
            new Thread(() -> {
                try {
                    Thread.sleep(3000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                currUI.access(() -> {
                    button.setEnabled(true);
                    bc.setEnabled(false);
                });
            }).start();
        });
        add(bc);
        add(button);
    }
}

按钮在我点击时禁用，3 秒后启用。但是 Spinner 继续旋转。属性更改未更新。有人知道为什么吗？

Answer 1

TLDR; 你做对了一切。您的代码没有任何问题，而且 webcomponent 似乎对属性更改没有反应

更长的版本：

我已经在 Vaadin 项目之外尝试过这个网络组件，不幸的是，它没有按照您期望的方式工作。此外，它在 description:

中说明

active: boolean | null | undefined If true spinner is shown

(所以并不单独表示设置一次后visibility就更新了..)

这里有一个例子JSFiddle example

因此，我们的 Vaadin 代码没有任何问题，并且 active 属性在单击按钮时 removed/added 是正确的，如果您在 devTools 中签入。

Web 组件似乎在渲染一次后根本不会对属性更改做出反应。如果查看其实现代码，属性 active 仅在 render() 函数中使用 Code in unpkg.

我不是 web 组件方面的专家，所以不确定它应该如何实现，但也许你可以创建一个错误报告到组件的 Github 仓库？如果需要，请随意重用示例 JSFiddle :)

如何在 Vaadin Flow 的组件中填充属性的更改？

How can i populate a change of a property in a Component in Vaadin Flow?

web-component

vaadin-flow

如何在 Vaadin Flow 的组件中填充 属性 的更改？

How can i populate a change of a property in a Component in Vaadin Flow?

web-component

vaadin-flow

如何在 Vaadin Flow 的组件中填充属性的更改？