Blazor Server共享实例变更后兄弟组件未同步更新的问题

1. 让Employee类实现INotifyPropertyChanged接口 #

核心是给共享对象加上属性变更通知能力，当Name属性修改时自动触发事件，通知所有监听的组件：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Employee : INotifyPropertyChanged
{
    private string _name;

    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 在绑定对象的组件中订阅变更事件 #

每个需要同步更新的组件（比如Welcome.razor和ChangeName.razor）都要订阅Employee的PropertyChanged事件，在事件触发时调用StateHasChanged()更新UI，同时要在组件销毁时取消订阅，避免内存泄漏。

Welcome.razor示例： #

@inject Employee EmployeeInstance
@implements IDisposable

<h1>Welcome, @EmployeeInstance.Name!</h1>

@code {
    protected override void OnInitialized()
    {
        EmployeeInstance.PropertyChanged += OnEmployeePropertyChanged;
    }

    private void OnEmployeePropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        // 可以只监听Name属性变化，也直接调用StateHasChanged处理所有属性变更
        if (e.PropertyName == nameof(Employee.Name))
        {
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        EmployeeInstance.PropertyChanged -= OnEmployeePropertyChanged;
    }
}

ChangeName.razor示例： #

@inject Employee EmployeeInstance
@implements IDisposable

<input @bind="EmployeeInstance.Name" />

@code {
    protected override void OnInitialized()
    {
        EmployeeInstance.PropertyChanged += OnEmployeePropertyChanged;
    }

    private void OnEmployeePropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        EmployeeInstance.PropertyChanged -= OnEmployeePropertyChanged;
    }
}

原理说明 #

之前的问题是：单例Employee的属性变化时，Blazor组件无法感知到这个变更，仅在修改组件内调用StateHasChanged()只能更新自身。通过实现INotifyPropertyChanged，所有绑定该对象的组件都能收到属性变更通知，进而自动触发UI更新，替代静态方法这类不优雅的临时方案。

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