我们如何使用状态容器 Blazor Webassembly 从 child 调用方法

Question

我想从 child 组件调用一个方法，我有这段代码

应用状态：

public class AppState
{
    public string MyMessage { get; private set; }
    public string MyMsgToChildren { get; private set; }


    public event Action OnChange;

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

    public void SetMessageToChildren(string msg)
    {
        MyMsgToChildren = msg;
        NotifyStateChanged();
    }
    private void NotifyStateChanged() => OnChange?.Invoke();
}

和Child组件#1：

    @inject AppState AppState
<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>

</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");
    }

}

和#2 Child 与#1 的代码相同我有一个 parent 组件：

@page "/State"

@inject AppState AppState
<p>============================</p>
<h3>Parent</h3>
<p>send from child:<b>@AppState?.MyMessage</b>  </p>
<div class="col-sm-6">
    <button @onclick="SendMsgTochildren">Send To Parent</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;
    }
    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }

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

    /* I want to call this method from Child*/
    void TargetMethod(int page) 
    { 
    
    }
}

此应用运行良好，我只想调用此方法：“TargetMethod(int page)” 来自我的 child 组件之一，我还需要传递一个整数参数

我想使用此代码进行分页。我尝试制作一个组件（分页）并将其添加到每个 table 组件，分页将是主要组件的大 child 我知道我可以使用其他方式但我更喜欢使用状态容器在分页和其他之间进行通信

Answer 1

I want to call this method: "TargetMethod(int page)" from one of my child components and I need to pass an integer parameter as well

那你可以这样试试：

AppState.cs

 public class AppState
    {
        public Action<int> OnCounterChanged { get; set; }   
    }

Grandparent.razor

    @inject AppState AppState;
@page "/grandparent"
<h1>Counter Value from Grandparent : @Counter</h1>
    <Parent/>


@code{

    public int Counter { get; set; }

    protected override void OnInitialized()
    {
        AppState.OnCounterChanged += OnCounterChanged;
    }

    private void OnCounterChanged(int counter)
    {
        Counter = counter;
        StateHasChanged();
    }
}

Parent.razor

@inject AppState AppState;
<h1>Counter Value from Parent : @Counter</h1>
<Child />


@code{

    public int Counter { get; set; }

    protected override void OnInitialized()
    {
        AppState.OnCounterChanged += OnCounterChanged;
    }

    private void OnCounterChanged(int counter)
    {
        Counter = counter;
        StateHasChanged();
    }
}
<Child />

Child.razor

@inject AppState AppState;
<h1>Counter Value from child : @Counter</h1>
<button class="btn btn-primary" @onclick="UpdateCounter"> Update Counter</button>
@code{

    public int Counter { get; set; }

    private void UpdateCounter()
    {
        AppState.OnCounterChanged.Invoke(++Counter);
    }
}

我正在从子组件更新计数器并使用 int 参数调用事件。（这只是一个演示）

Answer 2

添加一个 PagingEventArgs class。

    public class PagingEventArgs : EventArgs
    {
        public int Page { get; set; }
    }

向您的 AppState 添加事件和通知程序 Class:

public event EventHandler<PagingEventArgs> PageChanged;

public void NotifyPageChanged(object sender, PagingEventArgs e)
    => PageChanged.Invoke(sender, e);

来自您的分页器的呼叫

private void Page(int page)
{
    appservice.NotifyPageChanged(this, new PagingEventArgs { Page = page });
}

并在您想要使用它的地方注册该事件。

我们如何使用状态容器 Blazor Webassembly 从 child 调用方法

How we can call a method from child with State container Blazor Webassembly

c#

components

asp.net-core

blazor-webassembly