从 Blazor 调用 javascript 会导致错误

Question

我有一个基于 .NET Core 3.1 构建的 Blazor 应用，我需要能够访问 USB 端口资源。我不断收到错误：

目前无法发出 JavaScript 互操作调用。这是 因为组件是静态渲染器。预呈现时 启用，JavaScript 互操作调用只能在 OnAfterRenderAsync 生命周期方法。

我有一个非常简单的 Blazor 组件来包装 Blazor.Extensions.WebUSB 库

public partial class Recordings : ComponentBase
{
[Inject] private IUSB _usb { get; set; }
[Inject] private ILogger<Recordings> _logger { get; set; }
[Inject] private IJSRuntime _runtime { get; set; }
private bool _initialized = false;

protected override Task OnAfterRenderAsync(bool firstRender)
{
if (!_initialized)
{
this._usb.OnConnect += OnConnect;
this._usb.OnDisconnect += OnDisconnect;
this._usb.Initialize();
this._initialized = true;
}
return Task.CompletedTask;
}
protected async Task GetDevices()
{
var devices = await this._usb.GetDevices();
if (devices != null && devices.Length > 0)
{
_logger.LogInformation("Device list received");
}
}
private void OnConnect(USBDevice device)
{
this._logger.LogInformation("Device connected");
}
private void OnDisconnect(USBDevice device)
{
this._logger.LogInformation("Device disconnected");
}
}

即使我按照建议在OnAfterRenderAsync中进行JS互操作，我仍然会收到相同的错误。我尝试推迟对_usb的呼叫。初始化直到按下按钮(意味着组件肯定应该完成渲染。

我尝试通过将 _Host.cshtml 中的渲染模式属性设置为服务器而不是服务器预呈现来禁用预渲染，但没有任何变化。

Answer 1

你的代码应该是这样的：

protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
this._usb.OnConnect += OnConnect;
this._usb.OnDisconnect += OnDisconnect;
this._usb.Initialize();
this._initialized = true;
}
return Task.CompletedTask;
}

注意：当第一个渲染变量为真(只出现一次(时，可以使用 JSInterop。在此之前你不能。这是初始化 JavaScript 对象的正确时间和地点。

OnAfterRender(布尔值(

和 OnAfterRenderAsync(布尔值(生命周期方法对于执行互操作或与从@ref接收的值进行交互非常有用。 使用 firstRender 参数可确保初始化工作仅执行一次。

希望这有帮助...