在大爆炸中使用全球面包屑

Question

I创建了这个

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();
}

我已经将面包屑注入了主层：

<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();
}
.
.
.
// In other component
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}")
});

我的问题是，需要两次单击即可更新面包屑，而它们的行为是非确定性的，您能帮助我修复此错误，以便更新初始化的组件上的面包屑吗？

您的问题在页面更新逻辑中。 您可以这样简化代码和逻辑。 breadcrumbservice

Answer 1

设置面包屑的唯一方法是通过

SetBreadcrumbs

方法。

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

        public IReadOnlyList<BreadcrumbItem> BreadcrumbItems => _breadcrumbItems.AsReadOnly();

        public event EventHandler? OnBreadcrumbsChanged;

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

        private void NotifyStateChanged(object? sender = null) => OnBreadcrumbsChanged?.Invoke(sender, EventArgs.Empty);
    }
}

BreadcrumbComponent.Razor

组件封装面包屑并更新更改。

@inject BreadcrumbService breadcrumbService
@implements IDisposable

<MudBreadcrumbs Items="breadcrumbService.BreadcrumbItems"></MudBreadcrumbs>

@code {
    protected override void OnInitialized()
    {
        breadcrumbService.OnBreadcrumbsChanged += BreadcrumbsService_OnChange;
    }

    private void BreadcrumbsService_OnChange(object? sender, EventArgs e)
    {
        if (sender != this)
            this.InvokeAsync(StateHasChanged);
    }

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

mainlayout.razor

    <MudMainContent Class="mt-16 pa-4">
        <BreadcrumbComponent />
        @Body
    </MudMainContent>

和家

@page "/"
@inject BreadcrumbService BreadcrumbService

//...

@code
{
    protected override void OnInitialized()
    {
        BreadcrumbService.SetBreadcrumbs(new List<BreadcrumbItem>
        {
            new BreadcrumbItem("Home", href: "/", icon: Icons.Material.Filled.Home)
        });
    }
}