Subscribe to an EventCallback from a Layout when using Router

Have working knowledge of Blazor WebAssembly but not too advanced.

I'm good with EventCallback from child components. What I haven't seen anywhere documented is how to subscribe to EventCallback from pages rendered from Blazors Router.

The use case is i've got a layout page with the placeholder for @Main. I'd like to subscribe to an EventCallback for a certain page within the layout but there's no way to reference that page's EventCallback directly since @Main could be any page and also it has no class type.

Specifically lets say i have several pages that allow a user to make a selection. Further assume they all share the same layout page. See the code below for the layout page code. I've got a cascading parameter to share the selections across all the pages and components.
How would I subscribe to the EventCallbacks in the pages that would be inserted into @Main from the layout page?

<main>
	<CascadingValue Value="@selectionIds" Name="selectionIds" >
		@Body 
		<DetailView />
	</CascadingValue>
</main>

Here's a Blazor Notification Pattern implementation that uses a Scoped service to maintain the data. I've used a simple country select to demonstrate the principles. selectionIds doesn't mean a lot out of context.

The first step is to separate the data and state from the component:

public class CountryData
{
    public string? Country { get; private set; }

    public event EventHandler? CountryChanged;

    public void SetCountry(string? value )
    {
        this.Country = value;
        this.CountryChanged?.Invoke( this, EventArgs.Empty );
    }
}

Registered as a Scoped Service

builder.Services.AddScoped<CountryData>();

A CountryDisplay component to dispay the country.

@implements IDisposable
@inject CountryData CountryData

<div class="alert alert-primary m-2">@this.CountryData.Country</div>

@code {

    protected override void OnInitialized()
        => this.CountryData.CountryChanged += OnCountryChanged;

    private void OnCountryChanged(object? sender, EventArgs e)
        => this.StateHasChanged();

    public void Dispose()
        => this.CountryData.CountryChanged += OnCountryChanged;
}

And a CountrySelector component to modify it:

@inject CountryData CountryData

<div class="bg-light m-2 pt-2 p-4 border border-1">

    <h3>Country Selector</h3>

    <InputSelect class="form-select" @bind-Value:get="this.CountryData.Country" @bind-Value:set="this.CountryData.SetCountry">

        @if (this.CountryData.Country is null)
        {
            <option selected disabled value=""> -- Select a Country -- </option>
        }

        @foreach (var country in CountryProvider.CountryList)
        {
            <option value="@country">@country</option>
        }

    </InputSelect>

</div>

@code {
    // NOTE - @bind-Value:get may give you an error.  It's a SDK issue.  The code will compile.
}

CountryLayout

@inherits LayoutComponentBase

<PageTitle>SO76864163</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
                <CountryDisplay />
                @Body
        </article>
    </main>
</div>

@code {
    private CountryData _countryData = new();
}

And Index:

@page "/"
@layout CountryLayout

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<CountrySelector />

And Counter:

@page "/counter"
@layout CountryLayout

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<CountrySelector />

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

I did considerable more research and for what seems like a common use case this feels far too under documented. The below modifications work.

It wasn't obvious that an EventCallback can be passed just like any other property via CascadingParameter. So you simply need to wrap the @Main route placeholder with an another CascadingParameter for the EventCallback.

<main>
  <CascadingValue Value="@selectionIds" Name="selectionIds" >
    <CascadingValue Value="@SelectionChanged" Name="SelectedChanged" >
      @Body 
      <DetailView />
    </CascadingValue>
  </CascadingValue>
</main>
@code{
   EventCallback<string> SelectionChanged => 
        EventCallback.Factory.Create<string>(this, (ids) => 
           Console.WriteLine($"Selection of {ids} Bubbled Up.")
        );
}

Then in any of the router delivered pages and/or other components:

[CascadingParameter(Name = "SelectionChanged")]
public EventCallback<string> SelectionChanged { get; set; }

private async Task someTrigger(){
   await SelectionChanged.InvokeAsync(selectionIds);
}