Vaadin流：使用SplitLayout和@ParentLayout时导航中断（？）

Question

[EDIT]问题[/ EDIT]

末尾的解决方案

上下文

我目前正在努力实现基于Component的{​​{1}}，如下所示：

想法是，带有SplitLayout（突出显示的行）的布局将用作用户在class="outer"中选择一行时应该加载的内容的占位符。

Grid已被添加到网格的"outer"-Layout旁，因此标记为SplitLayout。

另一个类使用slot='secondary'引用'outer'-Layout

通过单击@Route(value = "details", layout = OuterLayout.class)的条目，页面将导航到Grid。

---

问题：

我希望Vaadin将带注释的类的内容放在"grid/details"中，但会在其旁边添加一个新条目： 如果我删除第一个'outer'-Layout，则Vaadin将第二个标记为'outer'-Layout，并显示其内容： 它甚至根据当前选择的Gridentry进行更新...

---

来源：

拆分

slot='secondary'

外部

@Route(value = "grid", layout = ContentLayout.class)
@ParentLayout(ContentLayout.class)
public class MySplitLayout extends SplitLayout implements RouterLayout {
    private MyGrid grid;
    private MyDetailOuterLayout detailOuterLayout;

    public MySplitLayout() {
        setSizeFull();

        grid = new MyGrid();
        detailOuterLayout = new MyDetailOuterLayout();

        addToPrimary(grid);
        addToSecondary(detailOuterLayout);
    }
}

内部

@ParentLayout(MySplitLayout.class)
public class MyDetailOuterLayout extends FlexLayout implements RouterLayout{

    public MyDetailOuterLayout() {
        setClassName("outer");
    }
}

---

我是否误解了生命周期概念？

提前谢谢

---

解决方案

根据塔图·隆德（Tatu Lund）的建议，我修改了@Route(value = "grid/details", layout = MyDetailOuterLayout.class) public class MyDetailLayout extends FlexLayout implements HasUrlParameter<Integer>, BeforeEnterObserver { public MonitorDetailLayout() { setClassName("inner"); /* define data via URL*/ } } 的默认实现，如下所示：

RouterLayout

Answer 1

在像您这样的情况下使用RouterLayout的想法是，您需要重写showRouterLayoutContent(..)方法。导航发生时，将调用此方法，并且会将内容导航到布局中。因此，在您的情况下，我假设您需要一个路由目标，该目标包装了Grid。

因此模式就是这样，例如在您的主布局中，您需要具有内容保持器，这里是Div，但可以是任何东西（例如SplitLayout，或其他任何东西）

public class MainLayout extends VerticalLayout implements RouterLayout {
   private Div childWrapper = new Div();

   @Override
   public void showRouterLayoutContent(HasElement content) {
       childWrapper.getElement().appendChild(content.getElement());
   }
}

还请注意，如果您使用的是@Route(value="..", layout = ParentLayout.class)注释，则不应与其同时使用@ParentLayout(ParentLayout.class)。您只需将@ParentLayout用于不是Route目标的类。

这里有更多信息：https://vaadin.com/docs/v12/flow/routing/tutorial-router-layout.html和这里：https://vaadin.com/tutorials/nested-layouts-in-flow