在 Blazor 中，如何使用 EventCallback 创建接口？答案

【问题标题】：In Blazor, how can I create an interface with EventCallback?在 Blazor 中，如何使用 EventCallback 创建接口？
【发布时间】：2021-03-10 17:34:08
【问题描述】：

在 Blazor 中，EventCallback 结构与标准事件有点不同，它是单播而不是多播等。因此，我认为这不是重复的。

我正在尝试创建一组都具有相同 [参数] EventCallback 的组件，并且使用接口来强制执行它似乎是合理的......到目前为止，这似乎是不可能的。

我尝试过的事情：

将其视为 EventHandler

public interface IResolver
{
    event EventCallback Done;
}

这会引发错误：事件必须是委托类型。

...以及尝试使其像 EventHandler 一样工作的其他变体。

尝试使用 IEventCallback

EventCallback 实现了 IEventCallback，所以这看起来很有希望。但是，它是一个内部接口，对我不可用。

改用基类

这似乎可行，但我很好奇为什么我不能用界面来做到这一点。

还发现：

Event must be of delegate type?
各种关于使用接口实现类事件构造的文章，或者对EventHandler的帮助，这不是一回事。

这些似乎都与这个问题无关。

【问题讨论】：

我假设您不需要多播方面，那么为什么不将EventCallback 声明为接口上的普通属性呢？
你有没有尝试在你的界面中像public EventCallback MyCallBack { get; set; }一样声明它？
@ShaunCurtis 不，我没有尝试这样做，因为我通常不会将 EventCallbacks 声明为属性 - 不过，它似乎确实可以在界面上工作！我需要进行更多测试以查看实现中是否一切正常。你觉得会吗？我不确定这些是如何实现的，但我确实看到很多说明它们是“特殊的”。
@BrianMacKay。是的，它有效，请参阅下面的答案。它必须被声明为属性才能与组件构建器“工厂”和渲染器一起使用。注意实现类中添加的[Parameter]。
NP。如果需要，请返回。

标签： c# asp.net-core blazor blazor-server-side blazor-client-side

【解决方案1】：

使用正确的语法声明回调，它将起作用。

这是我的测试代码。

using Microsoft.AspNetCore.Components;

namespace TestBlazorServer
{
    public interface ICallbackComponent
    {
        public EventCallback MyCallBack { get; set; }
    }
}

// TestCallback.razor
@namespace  TestBlazorServer

@implements ICallbackComponent
<h3>TestCallback</h3>

<button class="btn btn-danger" @onclick="() => this.CallCallback()">Test Me</button>

我们现在用[Parameter] 声明MyCallBack。

using Microsoft.AspNetCore.Components;

namespace TestBlazorServer
{
    public partial class TestCallback : ComponentBase, ICallbackComponent
    {
        [Parameter] public EventCallback MyCallBack { get; set; }

        private void CallCallback()
        {
            MyCallBack.InvokeAsync();
        }
    }
}

我们可以在index.razor中声明多个实例。

// index.razor
<TestCallback MyCallBack="Callback1"></TestCallback>

<TestCallback MyCallBack="Callback2"></TestCallback>

<TestCallback MyCallBack="Callback3"></TestCallback>

<div>Test:@called</div>

@code {
    private string called;

    private void Callback1()
        => called = "First";

    private void Callback2()
        => called = "Second";

    private void Callback3()
        => called = "Third";

【讨论】：