发生导航时动态更改 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));
}