Blazor页面、布局与组件间通信及内容动态展示方案咨询

需求背景：主布局包含Header组件，Header根据页面路由的ID获取数据；需在@Body区域外，根据Header返回的ViewModel（如SomeCondition字段）动态展示内容（比如无权限提示），且逻辑集中处理，避免页面重复编码，暂不升级至.NET8。

以下是两种可行的简洁实现方案：

方案一：基于EventCallback的布局状态管理 #

通过Blazor原生的EventCallback实现Header与MainLayout的通信，将状态判断逻辑集中在布局中：

1. 改造Header组件使用EventCallback #

替换原有的Action为EventCallback，支持异步操作和组件状态更新：

@inject IAppState AppState;

<h3>My Header</h3>

@if(AppState?.RecordId != null)
{
    @AppState.RecordId
}

@code {
    [Parameter]
    public EventCallback<MyViewModel?> OnHeaderLoaded { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        // 模拟接口请求返回数据
        var response = new MyViewModel { 
            RecordId = AppState.RecordId, 
            SomeCondition = false // 模拟无权限场景
        };

        await OnHeaderLoaded.InvokeAsync(response);
    }
}

2. 在MainLayout中处理状态并控制内容展示 #

在主布局中接收Header返回的ViewModel，根据状态决定显示@Body或提示内容：

<MyHeader OnHeaderLoaded="HandleHeaderLoaded" />

@if (_headerViewModel == null)
{
    <p>加载中...</p>
}
else if (!_headerViewModel.SomeCondition)
{
    <div class="alert alert-danger">
        无对应记录的访问权限！
    </div>
}
else
{
    @Body
}

@code {
    private MyViewModel? _headerViewModel;

    private async Task HandleHeaderLoaded(MyViewModel? model)
    {
        _headerViewModel = model;
        StateHasChanged();
    }
}

3. 页面保持原有逻辑（仅设置RecordId） #

页面只需将路由参数存入AppState，无需关心权限判断：

@inject IAppState AppState
@page "/{id:int}"

<h1>Index Page @id</h1>

@code {
    [Parameter]
    public int id { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        AppState.RecordId = id;
        await base.OnParametersSetAsync();
    }
}

方案二：扩展全局AppState维护Header状态 #

通过给AppState添加INotifyPropertyChanged接口，实现全局状态的自动更新，进一步简化通信：

1. 改造AppState实现INotifyPropertyChanged #

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class AppState : INotifyPropertyChanged
{
    private int? _recordId;
    public int? RecordId
    {
        get => _recordId;
        set
        {
            _recordId = value;
            OnPropertyChanged();
        }
    }

    private MyViewModel? _headerViewModel;
    public MyViewModel? HeaderViewModel
    {
        get => _headerViewModel;
        set
        {
            _headerViewModel = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. Header组件直接更新AppState的HeaderViewModel #

@inject IAppState AppState;

<h3>My Header</h3>

@if(AppState?.RecordId != null)
{
    @AppState.RecordId
}

@code {
    protected override async Task OnParametersSetAsync()
    {
        var response = new MyViewModel { 
            RecordId = AppState.RecordId, 
            SomeCondition = false 
        };

        AppState.HeaderViewModel = response;
    }
}

3. MainLayout绑定AppState自动更新 #

@inject IAppState AppState
@implements IDisposable

<MyHeader />

@if (AppState.HeaderViewModel == null)
{
    <p>加载中...</p>
}
else if (!AppState.HeaderViewModel.SomeCondition)
{
    <div class="alert alert-danger">
        无对应记录的访问权限！
    </div>
}
else
{
    @Body
}

@code {
    protected override void OnInitialized()
    {
        AppState.PropertyChanged += OnAppStateChanged;
    }

    private void OnAppStateChanged(object? sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(AppState.HeaderViewModel))
        {
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        AppState.PropertyChanged -= OnAppStateChanged;
    }
}

方案选择 #

• 方案一：组件间通信边界清晰，耦合度低，适合仅在布局中处理状态的场景。
• 方案二：全局状态统一管理，代码更简洁，适合需要在多个组件共享Header状态的场景。

两种方案均能实现逻辑集中在MainLayout的目标，页面无需重复编写权限判断代码，满足简洁性要求。

内容的提问来源于stack exchange，提问作者abbottmw