[Blazor] 共享数据之Transfer service

科控物联

发布于 2023-09-01 08:02:00

27200

代码可运行

文章被收录于专栏：科控自动化科控自动化

运行总次数：0

代码可运行

[Blazor] .NET 7 Blazor 组件通信（参数、事件回调和状态/服务）练习

在 Blazor 中，可以使用三种方法在组件之间共享数据：

CascadingParameter.
Parameter.
Transfer service.

传输服务是在 Blazor 中的组件之间共享数据的有用方法，尤其是当所有组件都需要使用相同的数据（也称为“单一事实来源”）时。此方法允许您集中数据管理并保持组件状态一致，从而使应用程序更易于维护且更易于测试。

声明Transfer 服务
使用Transfer 服务

声明transfer 服务

Transfer 服务充当模型，包含每个属性的属性和事件。

要创建Transfer 服务：

创建一个类并使用事件声明属性。例如：

public class ExampleTransferService
{
    private string _data = "科控物联";
    public string Data
    {
        get => _data;
        set
        {
            _data = value;
            DataChanged?.Invoke(this, value);
        }
    }
    public event EventHandler<string> DataChanged = (sender, value) => { };
}

在代码示例中，我们有和作为属性和集合的示例。对于集合，您可以使用或创建自己的类：DataExampleInstancesObservableCollection<T> Collection<T>

public class ExampleTransferService
{
    public ObservableCollection<ExampleClass> ExampleInstances { get; set; } = new();
}

请务必注意，List<T>不支持hooking 事件。

在程序.cs文件中注册传输服务。例如：...

builder.Services.AddScoped<ExampleTransferService>();

通过在Program.cs中注册传输服务类，可以将其注入到任何需要它的组件中。这允许组件共享相同的数据并与应用程序的状态保持同步。

使用transfer服务

传输服务可以在组件或类中使用。若要在类中使用传输服务，需要将服务注入到类的构造函数中，并以与传输服务类相同的方式注册它。在本教程中，我们将重点介绍如何在组件中使用传输服务。

下面介绍如何在组件中使用传输服务：

注入传输服务并在组件的指令部分中实现接口。例如：IDisposable

@inject ExampleTransferService ExampleTransferService
@implements IDisposable

在组件的代码部分中定义用于响应更改事件的方法。方法签名必须与相应的事件匹配。例如，如果要对事件做出反应，该事件作为事件处理程序，则需要具有带有签名的方法。DataChangedEventHandler<string>void MyMethod(object? sender, string value)

或者使用集合更改：

ExampleTransferService.ExampleInstances.CollectionChanged += OnCollectionChanged;
ExampleTransferService.DataChanged += OnDataClassChanged;

订阅初始化阶段的事件，取消订阅处置阶段的订阅事件。有关详细信息，请参阅 Blazor 组件生命周期指南。

@code {
    protected override void OnInitialized()
    {
        ExampleTransferService.ExampleInstances.CollectionChanged += OnCollectionChanged;
        ExampleTransferService.DataChanged += OnDataClassChanged;
    }

    public void AddInstance()
    {
        ExampleTransferService.ExampleInstances.Add(new()
            {
                Data = "需要数据采集，随时联系我！"
            });
    }

    public void OnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs args)
    {
        InvokeAsync(StateHasChanged);
    }

    public void OnDataClassChanged(object? sender, string value)
    {
        InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        ExampleTransferService.ExampleInstances.CollectionChanged -= OnCollectionChanged;
        ExampleTransferService.DataChanged -= OnDataClassChanged;
    }
}

源代码地址

https://github.com/jingshui127/BlazorStudy

P.S.

builder.Services.AddSingleton<ExampleTransferService>();//注册服务

如果注册服务时，选择AddScoped

其实就是生命周期的问题。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-07-12，如有侵权请联系 cloudcommunity@tencent.com 删除

blazor

本文分享自科控物联微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度