Blazor：点击导航菜单Project List时重置IsDetail显示项目列表

问题根源：Blazor中导航到同一路由时，组件不会重新初始化，因此IsDetail会保留之前的true状态，导致点击导航链接后仍显示详情视图。

方法：监听导航事件重置状态 #

在ProjectList.razor中通过NavigationManager监听页面导航事件，当导航到当前页面路径时重置IsDetail：

1. 修改ProjectList.razor代码 #

@inject NavigationManager NavManager
@implements IDisposable

@if (IsDetail)
{
    <!-- 修正：传递IsDetail参数给子组件 -->
    <ProjectDetail OnDetailShown="UpdateDetailView" IsDetail="IsDetail"></ProjectDetail>
}
else
{
    <!-- 原列表按钮代码 -->
    <a class="btn btn-primary" @onclick="() => OnClick(projectId)" @onclick:preventDefault>DETAILS</a>
}

@code {
    public bool IsDetail { get; set; }
    // 假设Projects和Project已有定义
    private List<Project> Projects { get; set; } = new();
    private Project? Project { get; set; }

    protected override void OnInitialized()
    {
        // 订阅导航变化事件
        NavManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        // 检查是否导航到ProjectList页面
        if (e.Location.EndsWith("/projectList", StringComparison.OrdinalIgnoreCase))
        {
            IsDetail = false;
            StateHasChanged(); // 强制组件刷新UI
        }
    }

    private void UpdateDetailView()
    {
        IsDetail = false;
    }

    private void OnClick(int projectId)
    {
        IsDetail = true;
        Project = Projects.First(x => x.ProjectId == projectId);
    }

    // 取消事件订阅，避免内存泄漏
    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

2. 修正ProjectDetail组件的缺失代码 #

确保子组件正确定义回调参数（否则现有Save按钮功能可能隐含此代码，需补全）：

<h3>Project Details</h3>

<button class="btn btn-primary" @onclick="OnClick">Save</button>

@code {
    [Parameter]
    public bool IsDetail { get; set; }

    <!-- 新增：定义父组件传递的回调事件 -->
    [Parameter]
    public EventCallback<bool> OnDetailShown { get; set; }

    private async Task OnClick()
    {
        await OnDetailShown.InvokeAsync(false);
    }
}

原理说明 #

• NavigationManager.LocationChanged事件会在每次页面导航（包括同路由跳转）时触发
• 检查导航目标路径是否为projectList，若是则重置IsDetail为false
• 调用StateHasChanged()确保组件更新UI，因为事件回调不在Blazor的渲染生命周期内

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