Blazor -绑定到服务的属性，由另一个组件更改

Blazor 是一种使用 C# 和 HTML 构建交互式 Web UI 的框架，它允许开发者使用 .NET 在浏览器中运行代码。在 Blazor 中，组件之间的通信是一个常见的需求，尤其是当一个组件需要绑定到服务中的属性，并且这个属性可能会被另一个组件更改时。

基础概念

服务（Service）：在 Blazor 中，服务通常是指实现了某种业务逻辑或提供数据的类。服务可以通过依赖注入（DI）被多个组件共享。

属性绑定（Property Binding）：属性绑定是指将组件的属性与另一个对象的属性关联起来，使得当一个属性变化时，另一个属性也会自动更新。

组件通信（Component Communication）：组件通信是指在 Blazor 应用中不同组件之间传递数据和事件的方式。

类型

事件总线（Event Bus）：通过发布和订阅事件来进行组件间通信。
共享服务（Shared Service）：通过依赖注入共享一个服务实例，组件通过该服务实例进行通信。
参数传递（Parameter Passing）：通过路由参数或组件参数直接传递数据。

应用场景

全局状态管理：如用户登录状态、主题设置等。
跨组件数据共享：如购物车、通知中心等。
实时数据更新：如实时聊天、股票行情等。

遇到的问题及原因

问题：当一个组件绑定了服务的属性，但另一个组件更改了该属性后，绑定的组件没有更新。

原因：

缺少通知机制：服务中的属性更改后，没有通知绑定的组件进行更新。
非响应式数据：服务中的属性可能不是响应式的，导致组件无法检测到变化。

解决方法

使用 INotifyPropertyChanged 接口：

public class SharedState : INotifyPropertyChanged
{
    private string _message;
    public string Message
    {
        get => _message;
        set
        {
            _message = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

在组件中绑定属性：

@page "/component-a"
@inject SharedState State

<p>@State.Message</p>

@code {
    protected override void OnInitialized()
    {
        State.PropertyChanged += State_PropertyChanged;
    }

    private void State_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(State.Message))
        {
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        State.PropertyChanged -= State_PropertyChanged;
    }
}

在另一个组件中更改属性：

@page "/component-b"
@inject SharedState State

<button @onclick="ChangeMessage">Change Message</button>

@code {
    private void ChangeMessage()
    {
        State.Message = "New message!";
    }
}

通过这种方式，当 SharedState 中的 Message 属性被更改时，所有绑定到该属性的组件都会收到通知并更新 UI。