我怎样才能以某种方式结合 EventCallback<T>？

Question

所以我发现自己需要对一些 Blazor 组件进行子类化，其中一个原因是我需要从本质上创建一个装饰器来扩展它的功能。该扩展的一部分是附加一些额外的事件处理。由于组件现在使用EventCallback，它不是委托类型，因此我不能像使用多播委托那样简单地向它添加另一个处理程序。我可以替换它，但这意味着该组件的任何消费者都无法注册他们自己的任何处理程序，因为我的会覆盖它，所以现在我正在尝试包装它。这是场景的伪表示以及我正在尝试做的事情

public class OriginalBlazorComponent : ComponentBase
{
    [Parameter]
    public EventCallback<int> SomethingChanged { get; set; }

    private async Task SomeInternalProcess()
    {
        // ... some work here
        await SomethingChanged.InvokeAsync(1);
    }
}

public class MySubclassedComponent : OriginalBlazorComponent
{
    public override async Task SetParametersAsync(ParameterView parameters)
    {
        // I want to combine anything that the user may have registered with my own handling
        SomethingChanged = EventCallback.Factory.Create(this, async (int i) => 
        {
            // this causes a stack overflow because i just replaced it with this callback
            // so it's essentially calling itself by this point.
            await SomethingChanged.InvokeAsync(i); 

            await DoMyOwnStuff(i);
        });
        
        await base.SetParametersAsync(this);
    }
}

这里的想法是，我只是通过在SetParametersAsync() 中解决这个问题来确保用户的处理程序已被绑定，以便我可以将它包装在一个新的回调中，该回调将首先调用他们的处理程序，然后再运行我的处理程序。但是由于它是具有由基类调用的属性的基组件，这意味着我需要用我的新处理程序替换该特定属性，但这样做，这意味着新处理程序正在调用实际上是旧处理程序现在是新的处理程序，所以它现在是一个无限递归调用堆栈，并导致堆栈溢出。

所以我的第一个想法是，如果我能以某种方式获得原始 EventCallback 的副本，或者至少提取它的委托以便我可以创建一个新的回调，那么它就不会再引用自己了（因为它是一个结构而感到困惑，我想它总是自然地是副本），但我找不到任何方法来做到这一点。我尝试只使用EventCallback.Factory.Create(this, SomethingChanged)，希望它会使用相同的委托创建一个全新的回调实例，但它没有改变任何东西；同样的结果。

如果我可以覆盖原始组件的 SomeInternalProcess() 方法，这样我就可以在调用基本方法之前或之后将我的进程插入到那里，这当然不是问题，但它是第 3 方库。或者，如果 SomethingChanged 属性本身是虚拟的，我可以覆盖它以拦截它的设置器，但事实并非如此。

所以简而言之，有没有办法实现与多播委托相同的效果，以便我可以保留任何已注册的处理程序但与我自己的结合？或者至少有某种方式取消引用原始的 EventCallback 或提取它的委托，以便我可以创建一个新的委托？

例如

// how do I acheive something akin to
SomethingChanged += MyDelegate;

更新1：

我尝试通过在子类上声明我自己的来“隐藏”SomethingChanged 事件回调，以便我可以在基础上注册我自己的处理程序，其中除了我自己的处理程序之外还包括用户的处理程序。这在标准 C# 测试中有效，但 Blazor 不喜欢它。它在渲染期间将其视为重复属性并引发异常。

更新 2：

哈卡罗尼。 EventCallback 和 EventCallback<T> 都将委托存储在名为 Delegate 的内部字段中。为了看看它是否可以工作，我通过反射将它取出并使用它来创建一个新的 EventCallback 来替换用户创建的 EventCallback，它将我们两个包裹在一起，先执行他们的然后我的。它有效，而且我还没有看到任何奇怪的副作用。但我讨厌它，原因很明显。但这让我想知道，也许我所需要的只是让微软公开那个领域。我敢肯定它存在某种风险，但它只是一个函数指针。只要它是只读的，应该没问题吧？

Answer 1

好的，一个简单的责任链模式实际上起作用了：

public class OriginalBlazorComponent : ComponentBase
{
    [Parameter]
    public EventCallback<int> SomethingChanged { get; set; }

    private async Task SomeInternal Process()
    {
        // ... some work here
        await SomethingChanged.InvokeAsync(1);
    }
}

public class MySubclassedComponent : OriginalBlazorComponent
{
    private EventCallback<int> _callerSomethingChanged;

    public override async Task SetParametersAsync(ParameterView parameters)
    {        
        parameters.SetParameterProperties(this);

        _callerSomethingChanged = SomethingChanged;

        SomethingChanged = EventCallback.Factory.Create(this, async (int i) => 
        {
            await _callerSomethingChanged.InvokeAsync(i);
            await DoMyStuff(i); // this is the decoration
        });
        
        await base.SetParametersAsync(ParameterView.Empty);
    }
}

这只是将用户/开发人员可能已在私有字段中定义的任何回调存储，然后用我的回调替换它，该回调将调用他们然后我的。您必须先调用设置参数，以便它们的回调绑定，否则它最终会覆盖您的。然后最后，调用 base 带有一个空的参数视图来指示参数已经设置（这是框架内的一个模式，不这样做会导致异常）。

现在从剃刀的角度，从用户/开发者透视，而不是像这样使用原始组件：

<OriginalBlazorComponent SomethingChanged="MyChangeHandler" />

他们可以使用带有扩展功能的装饰组件

<MySubclassedComponent SomethingChanged="MyChangeHandler" />

这样做并没有替换他们的处理程序，它只是确保我的处理程序也被调用。而且，从基础组件（第三方原始组件）的角度来看，它只是正常运行，就像子类甚至不存在一样。

归根结底，EventCallback 是我们在 Blazor 中使用的，但显然它不能像我们可以与委托一样与其他回调结合使用（据我所知，无论如何），否则这将非常简单；我只需将我的处理程序添加到委托并完成它。如果有人知道这样做的方法，我真的很想知道。

然后为方便起见，将其重构为扩展：

public static class EventCallbackExt
{
    public static EventCallback<T> Chain<T>(this EventCallback<T> original, IHandleEvent receiver, Action<T> del)
    {
        var chain = new EventCallbackChainCore<T>(receiver, original, del);
        return chain.Callback;
    }

    public static EventCallback<T> Chain<T>(this EventCallback<T> original, IHandleEvent receiver, Func<T, Task> del)
    {
        var chain = new EventCallbackChainCore<T>(receiver, original, del);
        return chain.Callback;
    }

    public static EventCallback Chain(this EventCallback original, IHandleEvent receiver, Action del)
    {
        var chain = new EventCallbackChainCore(receiver, original, del);
        return chain.Callback;
    }

    public static EventCallback Chain(this EventCallback original, IHandleEvent receiver, Func<Task> del)
    {
        var chain = new EventCallbackChainCore(receiver, original, del);
        return chain.Callback;
    }

    private class EventCallbackChainCore<T>
    {
        private readonly EventCallback<T> _original;

        public EventCallback<T> Callback { get; }

        public EventCallbackChainCore(IHandleEvent receiver, EventCallback<T> original, MulticastDelegate del)
        {
            _original = original;

            var chained = new EventCallbackWorkItem(del);
            Callback = EventCallback.Factory.Create(receiver, async (T input) =>
            {
                await _original.InvokeAsync(input);
                await chained.InvokeAsync(input);
            });
        }
    }

    private class EventCallbackChainCore
    {
        private readonly EventCallback _original;

        public EventCallback Callback { get; }

        public EventCallbackChainCore(IHandleEvent receiver, EventCallback original, MulticastDelegate del)
        {
            _original = original;

            var chained = new EventCallbackWorkItem(del);
            Callback = EventCallback.Factory.Create(receiver, async () =>
            {
                await _original.InvokeAsync();
                await chained.InvokeAsync(null);
            });
        }
    }
}

因此，这为将来简化了它，并将像这样使用：

public class MySubclassedComponent : OriginalBlazorComponent
{
    public override async Task SetParametersAsync(ParameterView parameters)
    {        
        parameters.SetParameterProperties(this);
        SomethingChanged = SomethingChanged.Chain(this, DoMyStuff);
        return base.SetParametersAsync(ParameterView.Empty);
    }

    private async Task DoMyStuff(int newIndex)
    {
        // do stuff
    }
}

该扩展只执行相同的逻辑，但将其和状态管理抽象化，因此您不必使用私有字段来控制您的控件来保存它。希望这可以帮助。

Answer 2

你可以（应该）只做 SomeInternalProcess virtual。

或者在对 SomethingChanged() 的调用周围添加一个虚拟包装器：

public class MySubclassedComponent : OriginalBlazorComponent
{
   protected override OnSomethingChanged(int i)
   {
      // ignore, replace or augment the base class behaviour
   }
} 

Answer 3

更新的答案

我努力想清楚你想要做什么。但是，有了您的答案和 cmets，这是我的摘要和一些代码。

您有一个Callback，您希望确保始终调用基本方法，即使是从子级调用时也是如此。

我认为您的回答使您尝试做的事情过于复杂。为了记录，这是我的版本：

public class MyBaseComponent : ComponentBase
{
    private EventCallback<string> _childSomethingChanged;
    private Func<string, Task> BaseSomethingChanged;

    [Parameter] public EventCallback<string> SomethingChanged { get; set; }

    public MyBaseComponent()
    {
        // Cache the delegate
        BaseSomethingChanged = (value) =>
        {
            return MustRunProcess(value);
        };
    }

    private async Task MustRunProcess(string value)
    {
        // run whatever processes you need in here
        await _childSomethingChanged.InvokeAsync("Updated by Base");
    }

    public override Task SetParametersAsync(ParameterView parameters)
    {
        parameters.SetParameterProperties(this);

        if (this.SomethingChanged.HasDelegate)
            _childSomethingChanged = SomethingChanged;

        // This is a little naughty 
        // you shouldn't really update a parameter set value but needs must 
        SomethingChanged = EventCallback.Factory.Create( this, this.BaseSomethingChanged);

        return base.SetParametersAsync(ParameterView.Empty);
    }
}

这是子组件：

@inherits MyBaseComponent

<h3>MyComponent</h3>

<div class="alert alert-primary">
    @this.ChildData
</div>

<div>
    <button class="btn btn-primary" @onclick=DoUpdate>Update</button>
</div>
@code {
    private string ChildData = string.Empty;

    private void DoUpdate()
    {
        this.ChildData = DateTime.Now.ToLongTimeString();
        this.SomethingChanged.InvokeAsync("Updated by Child");
    }
}

和一个测试页：

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<MyComponent SomethingChanged=DoSomething />

<div class="alert alert-dark mt-2">
    @this.dataValue
</div>


@code {
    private string dataValue = string.Empty;

    private void DoSomething(string value)
        => this.dataValue = value;
}

Answer 4

我实际上需要为向导做类似的事情，我的解决方案是delegate EventHandler 和event 与EventCallback 的组合。

基类：

public class MyComponentBaseClass : ComponentBase
{
    [Parameter]
    [EditorRequired]
    public EventCallback OnClick { get; set; }

    public delegate Task OnClickInternalEventHandler();

    public event OnClickInternalEventHandler OnClickInternalEvent;

    public async Task ComponentClickMethod()
    {
        if (OnClick.HasDelegate)
            await OnClick.InvokeAsync();

        //Do the things

        await OnClickInternalEvent();
    }
}

父组件：

@inherits MyComponentBaseClass

<div ChildContainer>
    <CascadingValue Value="(MyComponentBaseClass)this">
        @ChildContent
    </CascadingValue>
</div>

@code {
    [Parameter]
    [EditorRequired]
    public RenderFragment ChildContent { get; set; }
}

子组件：

<button @onclick="ParentBase.ComponentClickMethod">Execute Event on Parent</button>

@code {
    [CascadingParameter]
    public MyComponentBaseClass ParentBase { get; set; }

    protected override void OnInitialized()
    {
        ParentBase.OnClickInternalEvent += PrivateChildMethod;
    }

    async Task PrivateChildMethod() =>
        //Your code here
        Console.WriteLine("Private Child Method");
}

这些代表用途广泛，可以以多种不同方式使用。上面的示例不是我在向导上实现的方式，但应该是一个很好且清晰的示例。