Question

0

837

Vistas

Llamar a JavaScript desde Blazor: ¿cómo eliminar JavaScript dentro de DotNetObjectReference?

Creé un proyecto Blazor Webassembly y agregué un oyente clave en JavaScript, que escucha cada pulsación de tecla en el documento DOM. Todo funciona como se esperaba, sin embargo, cuando abro la página de Blazor donde está registrado el detector de claves y luego lo abro de nuevo, aparece el siguiente error en el navegador web:

No hay ningún objeto rastreado con id '2'. Quizás la instancia de DotNetObjectReference ya se eliminó. (Parámetro 'dotNetObjectId')

Obviamente, el objeto "dotnethelper" está eliminado, pero el Javascript todavía está escuchando/llamando.

Básicamente, implementé la "clase auxiliar de método .NET de instancia de componente" de la documentación de Microsoft .

Página de Blazor:

Nota: IDisposable se inyecta en la parte superior y se llama a la función Dispose.

 @code { private KeyListenerInvokeHelper _keyListenerInvokeHelper; private DotNetObjectReference<KeyListenerInvokeHelper>? objRef; protected override async Task OnInitializedAsync() { objRef = DotNetObjectReference.Create(_keyListenerInvokeHelper); await JS.InvokeVoidAsync("initializeKeyListener", objRef); } public void Dispose() { objRef?.Dispose(); } }

Archivo JavaScript:

 window.initializeKeyListener = (dotnetHelper) => { document.addEventListener('keydown', logKey); function logKey(e) { dotnetHelper.invokeMethod('OnKeyDown', e.key); console.log('key down ' + e.key); } }

KeyListenerInvokeHelper:

 public class KeyListenerInvokeHelper { private readonly Action<string> action; public KeyListenerInvokeHelper(Action<string> action) { this.action = action; } [JSInvokable("OnKeyDown")] public void OnKeyDown(string key) { action.Invoke(key); } }

¿Qué he intentado hasta ahora?

Traté de restablecer la función en window.initializeKeyListener (es decir, configurar window.initializeKeyListener), sin embargo, esto no logró nada
Intenté eliminar el eventlistener en el evento 'keydown'.

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-05T12:11:34.359Z

Cuando se deshaga de su objeto, también debe eliminar el detector de eventos. Mencionaste I tried removing the eventlistener on the 'keydown' event. , pero tal vez la forma en que lo hiciste no fue la correcta? Mi javascript está un poco oxidado, pero creo que podrías hacer algo como lo siguiente:

 var logkey; window.initializeKeyListener = (dotnetHelper) => { logkey = (e) => { dotnetHelper.invokeMethod('OnKeyDown', e.key); console.log('key down ' + e.key); }; document.addEventListener('keydown', logkey); } window.removeKeyListener = () => { document.removeEventListener('keydown', logkey); }

y luego en tu componente:

 @implements IAsyncDisposable public async ValueTask DisposeAsync() { await JSRuntime.InvokeVoidAsync("removeKeyListener"); objRef?.Dispose(); }

Habiendo dicho eso, ¿quizás llamar a un método estático en C# usando [JSInvokable] sería más adecuado para su caso de uso?

0

837