Blazor中跨页面更新LoginDisplay组件数值的实现问题

要实现组件自动刷新，核心是让NumberService具备状态变化通知能力，再让LoginDisplay订阅该通知并触发组件重渲染。以下是具体实现步骤：

1. 修改NumberService，添加属性变化通知 #

实现INotifyPropertyChanged接口，让数值变化时能发出通知：

using System.ComponentModel;
using System.Security.Claims;
using Microsoft.AspNetCore.Identity;

public class NumberService : INotifyPropertyChanged
{
    private readonly UserManager<IdentityUser> _userManager;
    private int _number;

    // 定义属性变化事件
    public event PropertyChangedEventHandler? PropertyChanged;

    public NumberService(UserManager<IdentityUser> userManager)
    {
        _userManager = userManager;
    }

    // 改造Number属性，setter触发事件
    public int Number
    {
        get => _number;
        set
        {
            if (_number != value)
            {
                _number = value;
                OnPropertyChanged(nameof(Number));
            }
        }
    }

    public void Update(ClaimsPrincipal User)
    {
        var userIdClaim = User.FindFirst(ClaimTypes.NameIdentifier);
        // 这里可根据业务逻辑更新数值，示例为自增
        Number++;
    }

    // 触发事件的辅助方法
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改LoginDisplay组件，订阅变化通知 #

让组件监听NumberService的事件，收到通知后触发重渲染：

@inject NumberService NumberService
@implements IDisposable

<span class="main-nav-text">@NumberService.Number</span>

@code {
    [Inject]
    private AuthenticationStateProvider GetAuthenticationStateAsync { get; set; } = default!;

    protected override async Task OnInitializedAsync()
    {
        var authstate = await GetAuthenticationStateAsync.GetAuthenticationStateAsync();
        try
        {
            NumberService.Update(authstate.User);
        }
        catch { }

        // 订阅属性变化事件
        NumberService.PropertyChanged += OnNumberChanged;
    }

    // 收到变化通知时，触发组件重渲染
    private void OnNumberChanged(object? sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(NumberService.Number))
        {
            StateHasChanged();
        }
    }

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

3. 确保服务注册正确 #

在Program.cs中注册NumberService为Scoped（每个用户连接对应一个实例，符合用户状态的隔离需求）：

builder.Services.AddScoped<NumberService>();

原理说明 #

• 原代码中Number是普通属性，变化时不会通知Blazor组件，因此组件不会自动重渲染。
• 通过INotifyPropertyChanged接口，NumberService在数值变化时发出事件，LoginDisplay订阅后调用StateHasChanged()强制组件重新渲染，从而显示最新数值。

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