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

Question

我有一个实现路由布局的组件，如下所示：

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

}

但结果覆盖了侧菜单的所有内容。html文件

侧菜单。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.

我找到了此复合布局的解决方案：

我只需要修改我的模板侧菜单。html并添加如下<slot>标记：

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

然后，当我的视图被加载时，它被呈现到模板中的<slot>标记中