如何对来自 Blazor webassembly 组件的 javascript CustomEvent 作出反应

Question

我有一个 Canvas 元素，它有一些用 Javascript 编写的自定义功能。我正在尝试在 Blazor Webassembly 组件中为此功能创建一个包装器。

Javascript 代码使用 dispatchEvent 方法生成自定义事件：

const event = new CustomEvent("uvrectadded", {
            bubbles: true,
            detail: { uvrect: uvr }
});
const result = this.canvas.dispatchEvent(event);

如何在 Blazor 服务器端组件中监听此事件？我尝试了以下方法：

<canvas id="map-canvas" @uvrectadded="OnUVRectAdded"></canvas>

@code{
    private void OnUVRectAdded(EventArgs e)
    {
        Console.WriteLine("Blazor: ONUVRectAdded");
    }
}

在上面的代码中，指令没有被编译，但是我找不到如何注册一个事件指令。

旁白：我还尝试从 Javascript 组件引发 change 事件，这确实由 Blazor 代码使用 @onchange 指令注册，但是，一个例外抛出系统无法反序列化事件。

Answer 1

在 Blazor 中，您可以像这样使用 EventHandlerAttribute 注册指令：

[EventHandler("onuvrectadded", typeof(EventArgs))]
public static class EventHandlers
{
}

但是，我在反序列化 CustomEvent 的 detail 属性时遇到了一些问题。

Answer 2

我也在挣扎。我可以看到正在引发的 JS 事件（已添加一个 JS 侦听器以检查是否实际引发）。

我已经注册了事件，并定义了它的 C# 部分。

  [EventHandler("oncustomjsevent", typeof(CustomJSEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
    public static class EventHandlers
    {
        // This static class doesn't need to contain any members. It's just a place where we can put
        // [EventHandler] attributes to configure event types on the Razor compiler. This affects the
        // compiler output as well as code completions in the editor.
    }

    public class CustomJSEventArgs : System.EventArgs
    {
        // Data for these properties will be supplied by custom JavaScript logic
        public string EventData { get; set; }
    }

但无法让 Blazor 在任何地方查看事件。已尝试添加到 div、按钮、标签等仍然不起作用。例如。

   <Button @oncustomjsevent="OnLinkClick" />

 private void OnLinkClick(CustomJSEventArgs eventArgs)
    {
        throw new InvalidCastException(eventArgs.EventData);
        var x = 1; 
    }

如何对来自 Blazor webassembly 组件的 javascript CustomEvent 作出反应

How to react to javascript CustomEvent from Blazor webassembly component

blazor-webassembly