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

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

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

    }
}

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

但是结果重写了side menu.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>

ICONOS视图

预期结果是：

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

应用程序名称
ICONOS视图

您案例中的问题是，由于您有没有功能、数据绑定和自定义模板模型的裸模板，服务器端不知道其内容。因此，Div.add（）将其视为空Div并覆盖其内容

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

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

参见API规范

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

这里有更多关于这方面的信息，例如：

中说：

您可以使用

组件

或将子组件添加到模板中

Element

API，但由于PolymerTemplate使用了shadowdom 将渲染阴影树，而不是子元素中的元素 光之门

这意味着模板需要有一个

来标记 应该渲染灯光DOM元素的位置

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

我只需要修改我的模板侧菜单.html，并添加一个

标记，如下所示：

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

    }
}

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

应用程序名称

---

然后，当我的视图被加载时，它被渲染到模板的

标记中

如果我只使用Vaadin Flow来构建我的视图，而不使用@HtmlImport或@tag会怎么样？那么我如何定义插槽呢？