如何在BlazorDateRangePicker中初始化并跨页面同步起止日期

要实现多个页面间保留日期选择状态，核心是通过Scoped服务共享状态，同时处理初始化和页面间的状态同步。以下是具体步骤和代码：

1. 创建共享状态服务 #

先定义一个Scoped服务，用来存储全局的日期范围，并提供状态变化通知：

// DateRangeStateService.cs
public class DateRangeStateService
{
    // 存储全局的起止日期
    public DateTimeOffset? StartDate { get; private set; }
    public DateTimeOffset? EndDate { get; private set; }

    // 状态变化通知事件，用于通知所有页面更新
    public event Action OnDateRangeChanged;

    // 更新日期范围并触发通知
    public void UpdateDateRange(DateTimeOffset? start, DateTimeOffset? end)
    {
        StartDate = start;
        EndDate = end;
        OnDateRangeChanged?.Invoke();
    }

    // 初始化默认日期（仅当还未设置过值时）
    public void InitializeDefaultRange()
    {
        if (StartDate == null && EndDate == null)
        {
            StartDate = DateTime.Today.AddMonths(-1);
            EndDate = DateTime.Today.AddDays(1).AddTicks(-1);
            OnDateRangeChanged?.Invoke();
        }
    }
}

在Program.cs中注册这个Scoped服务：

builder.Services.AddScoped<DateRangeStateService>();

2. 改造页面组件（所有使用DateRangePicker的页面） #

每个页面需要注入状态服务，同步服务的日期值，并在选择日期时更新服务：

<!-- 页面1/2/3的DateRangePicker代码 -->
<DateRangePicker 
    @bind-StartDate="LocalStartDate" 
    @bind-EndDate="LocalEndDate" 
    class="form-control form-control-sm" 
    OnRangeSelect="HandleRangeSelect" 
    Culture="@(System.Globalization.CultureInfo.GetCultureInfo("fr-FR"))" 
    AutoApply=true 
    placeholder="Choose a date...">
</DateRangePicker>

@code {
    // 注入状态服务
    [Inject] private DateRangeStateService DateRangeState { get; set; }

    // 页面本地的日期变量，与服务同步
    private DateTimeOffset? LocalStartDate { get; set; }
    private DateTimeOffset? LocalEndDate { get; set; }

    protected override void OnInitialized()
    {
        // 初始化：先让服务设置默认值（如果还没设置），再同步到本地变量
        DateRangeState.InitializeDefaultRange();
        LocalStartDate = DateRangeState.StartDate;
        LocalEndDate = DateRangeState.EndDate;

        // 订阅服务的状态变化事件，其他页面修改日期时，当前页面自动更新
        DateRangeState.OnDateRangeChanged += SyncLocalDates;
    }

    // 同步服务的日期到本地变量，并刷新组件
    private void SyncLocalDates()
    {
        LocalStartDate = DateRangeState.StartDate;
        LocalEndDate = DateRangeState.EndDate;
        StateHasChanged();
    }

    // 选择日期后，更新服务的全局状态
    private void HandleRangeSelect(DateRange range)
    {
        DateRangeState.UpdateDateRange(range.Start, range.End);
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        DateRangeState.OnDateRangeChanged -= SyncLocalDates;
    }
}

关键说明 #

• 初始化位置：默认日期的初始化逻辑放在DateRangeStateService的InitializeDefaultRange方法中，每个页面在OnInitialized生命周期方法里调用该方法并同步本地变量。
• 获取日期值：任何页面或组件需要使用日期时，直接从DateRangeStateService的StartDate和EndDate获取即可，也可以使用页面本地的LocalStartDate/LocalEndDate（两者保持同步）。
• 跨页面同步：通过服务的OnDateRangeChanged事件，当某一个页面修改日期时，所有订阅该事件的页面都会自动更新本地的日期变量，实现状态共享。

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