如何将视图（子）插入到父布局的 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));

    }
}

我路由父布局的子视图

@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

你的问题是因为你有没有功能和数据绑定的裸模板和自定义模板模型，服务器端不知道它的内容。因此 Div.add() 认为它是空的 div 并覆盖它的内容。

在您的情况下，一种方法是通过元素 API 修改内容，这可能类似于：

public IconsView() {
    label = new Label("ICONS VIEW");
    getElement().appendChild(label.getElement());
}

参见API规范

https://demo.vaadin.com/javadoc/com.vaadin/vaadin-core/10.0.0.rc5/com/vaadin/flow/dom/Node.html#appendChild-com.vaadin.flow.dom.Element...-

另一种方法是将 html 模板扩展为全功能聚合物元素

还有更多相关信息，例如这里：

https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-list-bindings.html

Answer 2

在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>

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

如何将视图（子）插入到父布局的 div 中？ Vaadin 10 / 流量

How insert view (child) into div of parent layout? Vaadin 10 / Flow

java

vaadin10

vaadin-flow