我有一个实现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>
在vaadin文档中说：
您可以使用
Component或ElementAPI将子组件添加到模板中，但是由于PolymerTemplate使用阴影DOM ，因此将渲染阴影树，而不是浅色DOM中的元素子组件。这意味着模板需要具有
<slot></slot>标记要渲染轻型DOM元素的位置。
我找到了此复合布局的解决方案：
我只需要修改我的模板side-menu.html并添加如下<slot>标签：
<side-menu>
<div>App Name</div>
<div id="menu"></div>
<slot></slot>
</side-menu>
然后在加载我的视图时，将其渲染到<slot>标签的模板中
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句