导航发生时动态更改 AppLayout 中的 NavBar 内容

Question

我想在导航到视图时在 AppLayout NavBar 部分动态添加按钮。我在抽屉中使用 RouterLink 链接（包装在选项卡中），即视图对象未在导航事件之前实例化。在 Vaadin 14+ 中是否有实现此目的的标准方法？

理想情况下，导航到的视图能够检查其父级（布局）并访问导航栏以从中访问 add/remove 组件。

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", new IronIcon("icomoon", "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;
    }

Answer 1

通过覆盖 showRouterLayoutContent(HasElement content) 并创建基础视图 class 为任何组件提供 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));
}

导航发生时动态更改 AppLayout 中的 NavBar 内容

Change NavBar content in AppLayout dynamically when navigation occurs

java

vaadin

vaadin-flow

vaadin14