Blazor 监听 javascript 事件

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

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

并且，在另一个 javascript 函数中，我引发了该事件：

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

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

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

问候我，

对于自定义事件，您需要手动使用JavaScript/.NET 互操作性.

使用实例方法调用 method:

• Pass the .NET instance by reference to JavaScript:
  • 对 DotNetObjectReference.Create 进行静态调用。
  • 将实例包装在 DotNetObjectReference 实例中，并在 DotNetObjectReference 实例上调用 Create。处理 DotNetObjectReference 对象（本节后面将提供一个示例）。
• 使用以下方法调用实例上的 .NET 实例方法invokeMethod or invokeMethodAsync功能。从 JavaScript 调用其他 .NET 方法时，.NET 实例也可以作为参数传递。

Example

请注意，这是一个非常简化的示例。您可能想添加一些东西；开始于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();
    }
}

2. 在 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
}

3. 在 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 问题.