Blazor Webassembly如何通过状态容器从子组件调用父级带参方法

1. 改造AppState状态容器 #

我们需要在状态容器中新增带int参数的事件、页码存储属性，以及对应的设值触发方法：

public class AppState
{
    public string MyMessage { get; private set; }
    public string MyMsgToChildren { get; private set; }
    // 新增：存储当前页码
    public int CurrentPage { get; private set; }

    public event Action OnChange;
    // 新增：带int参数的分页变化事件
    public event Action<int> OnPageChanged;

    public void SetMessage(string msg)
    {
        MyMessage = msg;
        NotifyStateChanged();
    }

    public void SetMessageToChildren(string msg)
    {
        MyMsgToChildren = msg;
        NotifyStateChanged();
    }

    // 新增：设置页码并触发分页事件
    public void SetCurrentPage(int page)
    {
        CurrentPage = page;
        OnPageChanged?.Invoke(page);
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

2. 修改父组件订阅分页事件 #

父组件不需要对外暴露方法，只需要在初始化时订阅状态容器的分页变化事件，触发时自动调用TargetMethod即可，记得销毁时取消订阅避免内存泄漏：

@page "/State"
@inject AppState AppState
@implements IDisposable

<p>============================</p>
<h3>Parent</h3>
<p>send from child:<b>@AppState?.MyMessage</b>  </p>
<div class="col-sm-6">
    <button @onclick="SendMsgTochildren">Send To Children</button>
</div>
<ChildComponent></ChildComponent>
<Child2Component></Child2Component>

@code {
    public string MsgToChildren { get; private set; } = "Hi, Im your father - ";
    int i = 0;

    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged;
        // 新增：订阅分页变化事件，触发时调用TargetMethod
        AppState.OnPageChanged += TargetMethod;
    }
    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
        // 新增：销毁时取消订阅
        AppState.OnPageChanged -= TargetMethod;
    }

    void SendMsgTochildren()
    {
        i++;
        AppState.SetMessageToChildren(MsgToChildren + i.ToString());
    }

    /* 该方法会在子组件修改页码时自动被调用 */
    void TargetMethod(int page) 
    { 
        // 这里写你原有的分页逻辑即可
    }
}

3. 修改子组件（分页组件）触发分页 #

子/孙组件不需要和父组件做任何绑定，只需要注入AppState，需要切换页码时调用SetCurrentPage方法传入目标页码即可：

@inject AppState AppState
@implements IDisposable

<p>============================</p>
<h3>#1 Child（分页组件）</h3>
<p>send from Father :<b>@AppState?.MyMsgToChildren</b>  </p>

<div class="col-sm-6">
    <button @onclick="SetMessage">Send To Parent</button>
    <!-- 示例：点击切换到第2页 -->
    <button @onclick="()=>ChangePage(2)">跳转到第2页</button>
</div>
<p>============================</p>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged;
    }
    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }
    void SetMessage()
    {
        AppState.SetMessage("Message From Child #1");
    }

    // 新增：切换页码方法，后续你的分页组件点击页码时调用这个方法即可
    void ChangePage(int targetPage)
    {
        AppState.SetCurrentPage(targetPage);
    }
}

方案优势 #

• 完全解耦：分页组件和父组件/表格组件没有直接依赖，不管嵌套多少层级都可以正常工作
• 复用性高：所有需要分页的页面，只要订阅AppState的OnPageChanged事件即可复用同一个分页组件
• 符合需求：全程基于状态容器实现，不需要使用ComponentParameter、EventCallback、CascadingValue等其他组件通信方案

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