Blazor 监听 javascript 事件

Question

我有一个名为 Hello 的 javascript 事件：

addEventListener('hello', function () {
  alert("event listener");
})

并且，在另一个 javascript 函数中，我提出了事件：

let event = new Event("hello", { bubbles: true });
document.dispatchEvent(event);

我现在要做的是让事件在 javascript 函数中触发。 Blazor 应该监听事件，而不是调用 Blazor 方法的 javascript。

希望任何人都可以帮助我。

问候我，

Answer 1

对于自定义事件，您需要手动使用JavaScript/.NET interoperability。

使用Instance Method Call 方法：

• 通过引用 JavaScript 传递 .NET 实例：
  • 对 DotNetObjectReference.Create 进行静态调用。
  • 将实例包装在 DotNetObjectReference 实例中并在 DotNetObjectReference 实例上调用 Create。处理 DotNetObjectReference 对象（本节后面会显示一个示例）。
• 使用invokeMethod 或invokeMethodAsync 函数在实例上调用.NET 实例方法。从 JavaScript 调用其他 .NET 方法时，也可以将 .NET 实例作为参数传递。

示例

注意，这是一个非常简化的示例。您可能想添加一些东西；在您的互操作类 to avoid memory leaks 上从 IDisposable 开始。

1. 在 C# 中，创建一个帮助类来管理互操作：

public class CustomEventHelper
{
    private readonly Func<EventArgs, Task> _callback;

    public CustomEventHelper(Func<EventArgs, Task> callback)
    {
        _callback = callback;
    }

    [JSInvokable]
    public Task OnCustomEvent(EventArgs args) => _callback(args);
}

public class CustomEventInterop : IDisposable
{
    private readonly IJSRuntime _jsRuntime;
    private DotNetObjectReference<CustomEventHelper> Reference;

    public CustomEventInterop(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public ValueTask<string> SetupCustomEventCallback(Func<EventArgs, Task> callback)
    {
        Reference = DotNetObjectReference.Create(new ScrollEventHelper(callback));
        // addCustomEventListener will be a js function we create later
        return _jsRuntime.InvokeAsync<string>("addCustomEventListener", Reference);
    }

    public void Dispose()
    {
        Reference?.Dispose();
    }
}

1. 在 Blazor 组件中，添加互操作类的实例 (Interop) 并添加本地方法作为回调 (HandleCustomEvent)：

private CustomEventInterop Interop { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender) {
    if (!firstRender)
    {
        return;
    }
    Interop = new(JS);
    await Interop.SetupCustomEventCallback(args => HandleCustomEvent(args));
    HasRendered = true;
}

private void HandleCustomEvent(EventArgs args) {
    // ... handle custom event here
}

1. 在 JavaScript 中，添加一个引用 DotNetObjectReference 的方法，并且可以在 C# 中调用互操作：

function addCustomEventListener(dotNetObjectRef) {
  document.addEventListener('hello', (event) => {
    // Calls a method by name with the [JSInokable] attribute (above)
    dotNetObjectRef.invokeMethodAsync('OnCustomEvent')
  });
}

如果使用 TypeScript，您可以查看GitHub Issue。