java - 如何将 View (子)插入到父布局的 div 中？ Vaadin 10/流

Question

我有一个像这样实现 RouterLayout 的组件:

@Tag("side-menu")
@HtmlImport(value = "src/components/side-menu.html")
public class SideMenu extends PolymerTemplate<TemplateModel> implements RouterLayout {

    @Id("menu")
    private PaperListBox listBox = new PaperListBox();

    public SideMenu() {

        listBox.addMenu(new PaperItem("tutorial", TutorialView.class));
        listBox.addMenu(new PaperItem("icons", IconsView.class));

    }
}

我路由父布局的 View 子

@Route(value=IconsView.VIEW_ROUTE, layout = SideMenu.class)
public class IconsView extends Div {

    public static final String VIEW_ROUTE = "icons";

    public IconsView() {
        add(new Label("ICONS VIEW"));
    }

}

但结果覆盖了side-menu.html文件的所有内容。

side-menu.html模板基本格式

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <div id=contenido><!-- I want to show here my view Icons --></div>
</side-menu>

但是结果却是

<side-menu>
    <div>
       <label>ICONOS VIEW</label>
    </div>
</side-menu>

预期的结果是:

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <div id=contenido>
       <div>
          <label>ICONOS VIEW</label>
        </div>
    </div>
</side-menu>

Answer 1

在vaadin documentation是这样说的:

You can add child components to templates using the Component or Element API, but because PolymerTemplate uses the shadow DOM the shadow tree is rendered instead of the elements children that are in the light DOM.

This means that the template needs to have a <slot></slot> to mark the place where the light DOM elements should be rendered.

我找到了这个复合布局的解决方案:

我只需要修改我的模板 side-menu.html 并添加一个 <slot>像这样的标签:

<side-menu>
    <div>App Name</div>
    <div id="menu"></div>
    <slot></slot>
</side-menu>

然后当我的 View 被加载时，它被渲染到 <slot> 中标记到模板中