Component 간 데이터 공유 - Transfer Service

하나의 data 를 모든 Component 가 사용할 때 선호되는 기술

 

TransferService 라는 state management class 를 따로 두고

해당 class 가 model class 를 관리하도록 하는 형태

 

Data/TransferService.cs 

using System.Collections.ObjectModel;

namespace BlazorTutorial.Data;

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

    public ObservableCollection<ModelClass> Instances { get; set; } = new();
}

public class ModelClass
{
    public string Data { get; set; } = "";
}

 

Pages/Transfer1.razor

@using Data
@using System.Collections.Specialized
@inject TransferService TransferService
@implements IDisposable


<div class="border border-link-success border-3 p-3">
    <h3>Transfer 1</h3>
    <div class="card">
        <div class="card-body">
            <div>Received Data: <span class="text-danger">@TransferService.Data</span></div>
            <label><input type="text" @bind="TransferService.Data" @bind:event="oninput"/></label>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div>Number of instances: <span class="text-danger">@TransferService.Instances.Count</span></div>
            <button class="btn btn-primary" type="button" @onclick="AddInstance">Add Instance</button>
        </div>
    </div>
</div>

@code {
    protected override void OnInitialized()
    {
        TransferService.Instances.CollectionChanged += OnCollectionChanged;
        TransferService.DataChanged += OnDataChanged;
    }

    public void AddInstance()
    {
        TransferService.Instances.Add(new()
            {
                Data = "New instance"
            });
    }

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

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

    public void Dispose()
    {
        TransferService.Instances.CollectionChanged -= OnCollectionChanged;
        TransferService.DataChanged -= OnDataChanged;
    }
}

Pages/Transfer2.razor

@using Data
@using System.Collections.Specialized
@inject TransferService TransferService
@implements IDisposable


<div class="border border-link-success border-3 p-3">
    <h3>Transfer 2</h3>
    <div class="card">
        <div class="card-body">
            <div>Received Data: <span class="text-danger">@TransferService.Data</span></div>
            <label><input type="text" @bind="TransferService.Data" @bind:event="oninput"/></label>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div>Number of instances: <span class="text-danger">@TransferService.Instances.Count</span></div>
            <button class="btn btn-primary" type="button" @onclick="AddInstance">Add Instance</button>
        </div>
    </div>
</div>

@code {
    protected override void OnInitialized()
    {
        TransferService.Instances.CollectionChanged += OnCollectionChanged;
        TransferService.DataChanged += OnDataChanged;
    }

    public void AddInstance()
    {
        TransferService.Instances.Add(new()
            { 
                Data = "New instance"
            });
    }

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

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

    public void Dispose()
    {
        TransferService.Instances.CollectionChanged -= OnCollectionChanged;
        TransferService.DataChanged -= OnDataChanged;
    }

Pages/TransferUnion.razor

@page "/transfer-service"
<h3>TransferService</h3>
<div class="w-50">
    <Transfer1 />
    <Transfer2 />
</div>

 

Program.cs

Transferservice class 를 Dependency Injection 을 위해 services 에 등록하자

...
builder.Services.AddScoped<TransferService>();
...

 

 

 

Component 하나의 수정이 다른 Component 에 바로 전달 된다. 

TransferService 가 그 역할을 하고 있다. 

 

 

관련영상

https://youtu.be/O24DT8LbCjA