Blazor项目中点击NavMenu项直接打开MudDrawer的实现问题

提供两种实现方案，可根据应用复杂度选择：

方案一：通过路由参数控制（轻量快速） #

无需额外依赖，通过路由查询参数触发抽屉自动打开。

1. 修改导航菜单的Reminders链接 #

给MudNavLink的Href添加?openDrawer=true参数：

<MudPaper Width="250px" Elevation="0" Class="py-3">
    <MudNavMenu Bordered="true">
        <MudNavLink Href="/dashboard">Dashboard</MudNavLink>
        <MudNavLink Href="/reminders?openDrawer=true">Reminders</MudNavLink>
        <MudNavLink Href="/about">About</MudNavLink>
    </MudNavMenu>
</MudPaper>

2. 修改Reminders组件监听路由参数 #

注入NavigationManager，在组件初始化时检查参数并打开抽屉：

@page "/reminders"
@inject NavigationManager NavManager

<div class="d-flex">
    <MudButton Color="Color.Inherit" OnClick="@ToggleDrawer" StartIcon="@Icons.Material.TwoTone.Schedule" Class="mx-2">Show notifications</MudButton>
</div>
<MudDrawerContainer Class="mud-height-full">
    <MudDrawer @bind-Open="@open" Width="450px" Fixed="true" Elevation="24" Variant="@DrawerVariant.Temporary"
               DisableOverlay="false" Style="background-color:whitesmoke;position:fixed;" Anchor="Anchor.End">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">List of Reminders</MudText>
        </MudDrawerHeader>
        @foreach(var reminder in ReminderList)
        {
            <MudCard>
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText Typo="Typo.h6">@reminder</MudText>
                        <MudText Typo="Typo.caption">@DateTime.Now.ToString("dddd hh:mm tt")</MudText>
                    </CardHeaderContent>
                    <CardHeaderActions>
                        <MudTooltip Text="Delete">
                            <MudIconButton Icon="@Icons.Material.Filled.Close" Color="Color.Default" />
                        </MudTooltip>
                        <MudTooltip Text="Settings">
                            <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Default"/>
                        </MudTooltip>
                    </CardHeaderActions>
                </MudCardHeader>
            </MudCard>
            <MudDivider />
        }
    </MudDrawer>
</MudDrawerContainer>

@code {
    [Inject]
    public NavigationManager NavManager { get; set; }

    public List<string> ReminderList {get; set;} = new List<string>
    {
        "Reminder 1",
        "Reminder 2",
        "Reminder 3"
    };

    public bool open = false;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ParseRouteParams();
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        ParseRouteParams();
    }

    private void ParseRouteParams()
    {
        var uri = new Uri(NavManager.Uri);
        var queryParams = System.Web.HttpUtility.ParseQueryString(uri.Query);
        
        if (bool.TryParse(queryParams["openDrawer"], out bool shouldOpen) && shouldOpen)
        {
            open = true;
            // 可选：移除查询参数，避免刷新页面重复打开抽屉
            NavManager.NavigateTo("/reminders", replace: true);
        }
    }

    public void ToggleDrawer()
    {
        open = !open;
    }
}

方案二：全局状态管理（适合复杂应用） #

适合需要跨组件共享状态的场景（比如从多个页面触发抽屉打开）。

1. 创建全局状态服务 #

public class AppState
{
    public bool ShouldOpenReminderDrawer { get; set; }
    public event Action OnChange;

    public void SetOpenReminderDrawer(bool value)
    {
        ShouldOpenReminderDrawer = value;
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

2. 注册状态服务 #

在Program.cs中添加：

builder.Services.AddScoped<AppState>();

3. 修改导航菜单触发状态 #

<MudPaper Width="250px" Elevation="0" Class="py-3">
    <MudNavMenu Bordered="true">
        <MudNavLink Href="/dashboard">Dashboard</MudNavLink>
        <MudNavLink Href="/reminders" OnClick="@(() => AppState.SetOpenReminderDrawer(true))">Reminders</MudNavLink>
        <MudNavLink Href="/about">About</MudNavLink>
    </MudNavMenu>
</MudPaper>

@code {
    [Inject]
    public AppState AppState { get; set; }
}

4. 修改Reminders组件监听状态 #

@page "/reminders"
@inject AppState AppState
@implements IDisposable

<div class="d-flex">
    <MudButton Color="Color.Inherit" OnClick="@ToggleDrawer" StartIcon="@Icons.Material.TwoTone.Schedule" Class="mx-2">Show notifications</MudButton>
</div>
<MudDrawerContainer Class="mud-height-full">
    <MudDrawer @bind-Open="@open" Width="450px" Fixed="true" Elevation="24" Variant="@DrawerVariant.Temporary"
               DisableOverlay="false" Style="background-color:whitesmoke;position:fixed;" Anchor="Anchor.End">
        <!-- 抽屉内容与原代码一致 -->
    </MudDrawer>
</MudDrawerContainer>

@code {
    public List<string> ReminderList {get; set;} = new List<string>
    {
        "Reminder 1",
        "Reminder 2",
        "Reminder 3"
    };

    public bool open = false;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        AppState.OnChange += StateHasChanged;
        
        if (AppState.ShouldOpenReminderDrawer)
        {
            open = true;
            AppState.SetOpenReminderDrawer(false); // 重置状态，避免重复触发
        }
    }

    public void ToggleDrawer()
    {
        open = !open;
    }

    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }
}

方案选择 #

• 方案一：适合简单场景，实现成本低，无需额外依赖。
• 方案二：适合复杂应用，支持跨组件状态共享，扩展性更强。

内容的提问来源于stack exchange，提问作者Riley Christian