[Blazor] Prism 사용하기 - EventAggregator

Blazor 에서 Prism 라이브러리의  EventAggregator 를 사용하는 방법입니다.

1. Blazor Assembly 프로젝트 생성

2. 'Prism.Core' Nuget Package 설치

3. Program.cs 에 EventAggregator 종속성 주입

builder.Services.AddScoped<IEventAggregator, EventAggregator>();

using Blazor.PrismTest;

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

using Prism.Events;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// EventAggregator 종속성 주입
builder.Services.AddScoped<IEventAggregator, EventAggregator>();

await builder.Build().RunAsync();

4. 예제 : Counter 화면에서 버튼 클릭시 Publish 하여 NavMenu 에 Subscribe된 이벤트가 실행되도록 

NavMenu.razor : Subscribe 처리

@using Blazor.PrismTest.Events
@using Prism.Events

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">Blazor.PrismTest</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    [Inject]
    private IEventAggregator ea { get; set; }

    [Inject]
    private NavigationManager navigationManager { get; set; }

    protected override void OnInitialized()
    {
        // TestEvent 구독 처리
        ea.GetEvent<TestEvent>().Subscribe(TestMethod);
    }

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private void TestMethod(string arg)
    {
        // Publish 시 메뉴 이동 처리
        navigationManager.NavigateTo("fetchdata");
    }
}

 

[Inject] private IEventAggregator ea { get; set; }

위처럼 선언하여 주입된 IEventAggregator 를 선언하고 OnInitialized 에서 TestEvent 를 Subscribe 합니다.
다른 곳에서 Publish 하게되면 TestMethod 가 실행됩니다.

Counter.razor : Publish 처리

@page "/counter"
@using Blazor.PrismTest.Events
@using Prism.Events

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<button class="btn btn-primary" @onclick="PublicMoveMenu">Publish Move Menu</button>

@code {
    private int currentCount = 0;

    [Inject]
    private IEventAggregator ea { get; set; }

    private void IncrementCount()
    {
        currentCount++;
    }

    private void PublicMoveMenu()
    {
        // TestEvent Publish
        ea.GetEvent<TestEvent>().Publish("MOVEMENU");
    }
}

Publish Move Menu 버튼 클릭시 주입된 IEventAggregator 에서 TestEvent 이벤트를 Publish 합니다.

실행결과

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.PrismTest