Question

我有以下课程需要一个可见的微调器：

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

该按钮在我单击时即被禁用，并在3s后启用。但是微调器继续旋转。不知何故，属性更改未更新。有人知道为什么吗？

Answer 1

TLDR; ，您已正确完成了所有操作。您的代码没有任何问题，而且似乎webcomponent对属性更改没有反应

长版：

我在Vaadin项目之外尝试了该Web组件，不幸的是，它无法按您期望的方式工作。另外，它在description中表示：

active：布尔值|空|未定义如果显示了真正的微调器

（因此，设置可见性一次后，并不意味着更新可见性。）

此处的示例JSFiddle example

因此，如果您签入devTools，我们的Vaadin代码没有任何问题，并且单击按钮后即可正确删除/添加active属性。

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

我不是Web组件方面的专家，因此不确定是否应以其他方式实现它，但是也许您可以向组件的Github存储库创建错误报告？如果需要，可以随时重用示例JSFiddle：）

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

1 个答案: