Vaadin Flow 访问当前 RouterLayout（从任何地方）答案

【问题标题】：Vaadin Flow Access Current RouterLayout (from anywhere)Vaadin Flow 访问当前 RouterLayout（从任何地方）
【发布时间】：2021-06-18 10:32:54
【问题描述】：

我们有一个 RouterLayout 类作为我们应用程序其余部分的框架，其中包括不同的不变组件，包括一个通知元素，需要在整个导航过程中保持可见。

@CssImport("./styles/shared-styles.css")
public class MainFrame extends Composite<VerticalLayout> implements RouterLayout, PageConfigurator, AfterNavigationObserver {
    
    // central Notification that persists throughout navigation
    private Notification notification;


    // other stuff....

}

我们现在尝试从代码中的任何位置显示此通知，以便所有视图、组件和子组件都能够显示一个简单的通知。

不幸的是，我不知道有一种简单的方法可以访问存在于 RouterLayout 中的通知，因为我们无法访问当前 UI 的布局级别。将通知放在视图（路由器内容）中不起作用，因为它在导航时被破坏。尝试使用事件总线不起作用，因为当从路由器内容内部触发时，不会调用 routerlayout 内部的事件侦听器（据我测试）。

我们希望实现的是有一个简单的静态访问类，能够访问当前设置的路由器的通知组件。

public static void showNotification(String text) {
    // something like this
    MainFrame frame = ((MainFrame)UI.getCurrent().getRouterLayout()).showNotification(text);
}

基本上，我们不知道有一种简单的方法可以从应用程序内部的任何位置与当前 UI 的当前设置布局进行通信，类似于 UI.getCurrent()。有没有办法实现这样的目标？

【问题讨论】：

您的问题实际上与stackoverflow.com/questions/67783918/… 和stackoverflow.com/questions/60180043/… 重复
如果您的应用程序使用 Spring Boot 或 Java EE CDI，我建议重构托管 bean 中的共享部分并在需要的任何地方自动装配/注入。
@TatuLund 如果我没看错的话，第一个问题是关于在同一会话的多个选项卡中传播信息，而第二个问题是关于通过下一个较低元素访问 RouterLayout。虽然我的问题在主题中非常相似，但我更感兴趣的是一种方便的方法，可以从应用程序内部的任何位置（而不仅仅是它的下一个子项）在 UI 范围内访问当前 RouterLayout。虽然遍历也是一种（相当肮脏）的方式，但我更希望有一个静态函数访问的解决方案，就像 UI.getCurrent()
是的，它们是同一个故事的不同方面。不幸的是，现在 UI 范围内的访问有了万无一失的方法。如 Leif 所述，您可以使用 ComponentUtil 将数据存包到 UI，但如果您需要 PreserveOnRefresh，这将不起作用。唯一简洁的解决方案是 Spring 或 CDI，使用 RouterScoped 和 MainLayout 作为范围所有者。
Leifs 方法为我们做到了，现在我们在主框架上没有需要在刷新时保留的元素，它们不应该在整个导航过程中丢失。因此，如上所述，我们将 MainFrame 链接到当前 UI，并且可以从应用程序中的任何位置静态访问当前显示的 Frame。也许将来会有更好的选择，但目前我们对给定的方法感到满意

标签： vaadin vaadin-flow vaadin14

【解决方案1】：

我不会直接将其与导航和路由器布局的概念联系起来。您拥有的是 UI 实例范围内的“单例”功能。

如果使用 Spring 或 CDI，那么将其定义为 UI 范围内的托管 bean 是很自然的，您可以在任何需要的地方注入它。

另一种选择是将逻辑基于UI.getCurrent()。 Flow 中的ComponentUtil 方法具有setData 和getData 方法，您可以使用它们将自己的自定义实例附加到特定的组件实例。因此，您可以这样做：

ComponentUtil.getData(UI.getCurrent(), MainFrame.class).showNotification("Hello");

【讨论】：