如何解决发生导航时动态更改 AppLayout 中的 NavBar 内容
我想在导航到视图时在 AppLayout NavBar 部分动态添加按钮。我在抽屉中使用 RouterLink 链接(包装在选项卡中),即视图对象未在导航事件之前实例化。在 Vaadin 14+ 中是否有实现此目标的标准方法?
理想情况下,导航到的视图将能够检查其父级(布局)并访问导航栏以从中添加/删除组件。
AppLayout 的外观如下:
MainLayout.java
public class MainLayout extends AppLayout implements BeforeEnterObserver,TrackerConfigurator {
private Map<Tab,Component> tabSet = new HashMap<>();
public MainLayout() {
FlexLayout navBarLayout = new FlexLayout(leftNavBarLayout,navBarContentContainer,rightNavBarLayout);
navBarLayout.setWidthFull();
navBarLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.BETWEEN);
navBarLayout.setAlignItems(FlexComponent.Alignment.CENTER);
addToNavbar(navBarLayout);
// Tabs
TabWithIdentifier page0 = tabForPageWithRouter("Dashboard",new IronIcon("icomoon","icons"),DashboardView.class);
TabWithIdentifier page1 = tabForPageWithRouter("Users","users2"),UserView.class);
...
final Tabs tabs = new Tabs(page0,page1,...);
tabs.setOrientation(Tabs.Orientation.VERTICAL);
addToDrawer(tabs);
}
private TabWithIdentifier tabForPageWithRouter(String title,IronIcon icon,Class classType) {
icon.setSize("1.3em");
icon.getStyle().set("margin-right","10px");
RouterLink routerLink = new RouterLink(null,classType);
routerLink.add(icon);
routerLink.add(title);
TabWithIdentifier tab = new TabWithIdentifier(routerLink);
tab.setId(title);
tab.setIdentifier(title);
tab.addClassName("drawer-tab");
return tab;
}
解决方法
通过覆盖 showRouterLayoutContent(HasElement content) 并创建一个为任何组件提供 Div 容器的基本视图类解决了这种情况 我想添加到导航栏。
@Override
public void showRouterLayoutContent(HasElement content) {
super.showRouterLayoutContent(content);
BaseView baseView = null;
if (content instanceof BaseView) {
baseView = (BaseView) content;
pageTitle = new Label(baseView.getViewTitle());
controlContainer.removeAll();
controlContainer.add(baseView.getViewIconTray());
}
fireEvent(new RouterNavigated(this));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。