728x90
728x170
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
728x90
그리드형
'C# > Blazor' 카테고리의 다른 글
[Blazor] 로딩바(Spinner) 처리하기 (0) | 2022.12.19 |
---|---|
[Blazor] MVVM Pattern 사용하기 (0) | 2022.10.26 |
[Blazor] Service 사용하여 데이터 바인딩 시키기 (종속성주입) (0) | 2022.10.21 |
[Blazor] css 이용하여 Pizza 메뉴판 만들기 (0) | 2022.10.21 |
[Blazor] Radzen - RadzenTree : 자식 없는 경우 부모 확장 아이콘 숨기기 (0) | 2022.10.21 |