在 Blazor 中显示或隐藏侧边菜单

Question

我是 blazor 的初学者。

请告诉我如何使用按钮显示或隐藏 Blazor 标准模板的侧边菜单。

非常感谢！

Answer 1

最好使用您自己的服务器，创建一个名为 ViewOptionService.cs 的新类。这将包含逻辑并作为单例服务工作。 _navBarVisible 将保持导航栏是否隐藏的状态，而 Toggle 将改变状态， NavBarClass 将用于隐藏导航栏的 div：

public class ViewOptionService
{
    private bool _navBarVisible = true;

    public Action OnChanged { get; set; }
    
    //Change state by click on the button
    public void Toggle()
    {
        _navBarVisible = !_navBarVisible;//Change
        if (OnChanged != null) OnChanged();//Callback for reload
    }

    //get additional css class for nav bar div
    public string NavBarClass
    {
        get
        {
            if (_navBarVisible) return String.Empty;//No additional css class for show nav bar
            return "d-none";//d-none class will hide the div
        }
    }
}

我们必须将ViewOptionService注册为Service，所以修改Program.cs中的Main：

public static async Task Main(string[] args)
{
    //..
    //Add next line to register
    builder.Services.AddSingleton<ViewOptionService>();

    await builder.Build().RunAsync();
}

现在我们可以将它作为服务注入并在 MainLayout.razor 中使用它来为 div 添加一个 css 类：

@inherits LayoutComponentBase
@inject ViewOptionService ViewOption

<div class="sidebar @ViewOption.NavBarClass">
    <NavMenu />
</div>

我们也可以将其注入到 Index.razor（或其他地方）中以添加按钮：

@page "/"
@inject ViewOptionService ViewOption

<button @onclick="ViewOption.Toggle">Hide Menu</button>

缺少最后一步，如果值发生变化，我们需要重新加载 MainLayout.razor，因此我们需要在 MainLayout 中添加代码部分：

@code {

    protected override async Task OnInitializedAsync()
    {
        ViewOption.OnChanged = () => { 
            StateHasChanged();//Refresh
        };
    }
}

=== 编辑 ===

我在https://github.com/DanielHWe/Hide-Blazor-NavBar-Sample下发了完整代码