Blazor全局面包屑更新异常：需两次点击生效的问题修复求助

问题背景 #

我创建了BreadcrumbService用于全局注入和更新面包屑，已在MainLayout中引入MudBreadcrumbs，在AppLayout中订阅面包屑变更事件，组件内通过SetBreadcrumbs设置面包屑内容，但初始化组件时面包屑需两次点击才更新，行为不确定，请求修复。

相关代码 #

BreadcrumbService 代码 #

public class BreadcrumbService
{
    private List<BreadcrumbItem> _breadcrumbItems = new List<BreadcrumbItem>();

    public List<BreadcrumbItem> BreadcrumbItems
    {
        get => _breadcrumbItems;
        set
        {
            _breadcrumbItems = value;
            NotifyStateChanged();
        }
    }

    public event Func<Task>? OnBreadcrumbsChanged;

    public void SetBreadcrumbs(IEnumerable<BreadcrumbItem>? items)
    {
        _breadcrumbItems = items?.ToList() ?? new List<BreadcrumbItem>();
        NotifyStateChanged();
    }

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

MainLayout 代码 #

<MudMainContent>
    <MudContainer MaxWidth="MaxWidth.Large" Style="height:max-content">
        <MudBreadcrumbs Items="BreadcrumbService.BreadcrumbItems"></MudBreadcrumbs>
        <MudPaper Elevation="3" Style="height:100dvh;">
            @Body
        </MudPaper>
    </MudContainer>
</MudMainContent>

AppLayout 代码 #

protected override async Task OnInitializedAsync()
{
    BreadcrumbService.OnBreadcrumbsChanged += BreadcrumbsService_OnChange;
}
 

public void Dispose()
{
    BreadcrumbService.OnBreadcrumbsChanged -= BreadcrumbsService_OnChange;
}

private async Task BreadcrumbsService_OnChange()
{
    Breadcrumbs = BreadcrumbService.BreadcrumbItems;
    await InvokeAsync(StateHasChanged);
}

组件使用代码 #

@inject BreadcrumbService BreadcrumbService
protected override async Task OnInitializedAsync()
{
    BreadcrumbService.SetBreadcrumbs(new List<BreadcrumbItem>
    {
        new BreadcrumbItem("Home", href: "/", icon: Icons.Material.Filled.Home)
    });

    StateHasChanged();
}
...
// 其他组件中
BreadcrumbService.SetBreadcrumbs(new List<BreadcrumbItem>
{
    new BreadcrumbItem("Home", href: "/", icon: Icons.Material.Filled.Home),
    new BreadcrumbItem("Blogs", href: "/blogs"),
    new BreadcrumbItem($"Blog {Id}", href: $"/blogs/{ChapId}")
});

问题原因 #

1. 订阅时机滞后：AppLayout的OnInitializedAsync在组件初始化时订阅事件，但如果子组件的OnInitializedAsync先执行（比如路由组件加载更快），此时事件还未订阅，第一次SetBreadcrumbs触发的通知会丢失，导致面包屑没有更新。
2. MainLayout直接绑定服务集合：MudBreadcrumbs直接绑定BreadcrumbService.BreadcrumbItems，但Blazor对集合的变更检测基于引用，当SetBreadcrumbs替换整个集合引用时，MainLayout可能无法及时感知到变更（除非触发组件重新渲染）。
3. 事件调用未等待异步操作：NotifyStateChanged中直接调用OnBreadcrumbsChanged?.Invoke()，但事件是Func<Task>，未等待异步操作完成，可能导致状态更新不及时。

修复方案 #

1. 修正BreadcrumbService的事件调用逻辑 #

确保异步事件被正确等待，避免状态更新丢失：

private async Task NotifyStateChanged()
{
    if (OnBreadcrumbsChanged != null)
    {
        await OnBreadcrumbsChanged.Invoke();
    }
}

同时修改SetBreadcrumbs为异步方法：

public async Task SetBreadcrumbs(IEnumerable<BreadcrumbItem>? items)
{
    _breadcrumbItems = items?.ToList() ?? new List<BreadcrumbItem>();
    await NotifyStateChanged();
}

2. AppLayout同步初始状态并提前订阅 #

在AppLayout的OnInitializedAsync中，除了订阅事件，还要同步一次当前面包屑状态，避免初始状态丢失：

protected override async Task OnInitializedAsync()
{
    BreadcrumbService.OnBreadcrumbsChanged += BreadcrumbsService_OnChange;
    // 同步初始状态
    Breadcrumbs = BreadcrumbService.BreadcrumbItems;
    await InvokeAsync(StateHasChanged);
}

3. MainLayout直接订阅事件维护状态 #

让MainLayout直接订阅事件，避免直接绑定服务集合导致的变更检测问题：

@inject BreadcrumbService BreadcrumbService
@implements IDisposable

<MudMainContent>
    <MudContainer MaxWidth="MaxWidth.Large" Style="height:max-content">
        <MudBreadcrumbs Items="_currentBreadcrumbs"></MudBreadcrumbs>
        <MudPaper Elevation="3" Style="height:100dvh;">
            @Body
        </MudPaper>
    </MudContainer>
</MudMainContent>

@code {
    private List<BreadcrumbItem> _currentBreadcrumbs = new();

    protected override async Task OnInitializedAsync()
    {
        BreadcrumbService.OnBreadcrumbsChanged += OnBreadcrumbsChanged;
        // 同步初始状态
        _currentBreadcrumbs = BreadcrumbService.BreadcrumbItems;
        await InvokeAsync(StateHasChanged);
    }

    private async Task OnBreadcrumbsChanged()
    {
        _currentBreadcrumbs = BreadcrumbService.BreadcrumbItems;
        await InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        BreadcrumbService.OnBreadcrumbsChanged -= OnBreadcrumbsChanged;
    }
}

4. 组件延迟设置面包屑到首次渲染后 #

将组件的面包屑设置延迟到OnAfterRenderAsync（第一次渲染后）执行，确保AppLayout已订阅事件：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await BreadcrumbService.SetBreadcrumbs(new List<BreadcrumbItem>
        {
            new BreadcrumbItem("Home", href: "/", icon: Icons.Material.Filled.Home)
        });
    }
}

总结 #

核心问题是初始事件通知丢失和组件变更检测未触发，通过修正事件异步调用、提前同步初始状态、让显示面包屑的组件直接订阅事件，即可解决初始化时需要两次点击才更新的问题。

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