0
344
ViewsBlazor: cargue el archivo JS en el componente secundario y exponga sus métodos
La pregunta
Estoy tratando de cargar un archivo JavaScript en un componente secundario y exponer sus métodos al principal. Pude cargar el archivo, pero cada vez que intento usar mis métodos fuera del componente secundario, aparece un error. He proporcionado un ejemplo mínimo como referencia.
Realmente estoy atascado con la razón por la que esto no funciona ... Mi opinión es que tiene algo que ver con que el componente secundario no se represente por completo. Y no estoy muy seguro de cómo solucionarlo.
Ejemplo mínimo
Página
// Page.razor <ChildComponent @ref="Ref" /> @code { private ChildComponent Ref; protected override async Task OnAfterRenderAsync() { await Ref.Test(); } }Componente hijo
// ChildComponent.razor @inject IJSRuntime JS @code { private IJSObjectReference Module; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { Module = await JS.InvokeAsync<IJSObjectReference>("import", "./ChildComponent.razor.js"); } } public async Task Test() { await Module.InvokeVoidAsync("Test"); } } // ChildComponent.razor.js export function Test() { alert("Hello world!"); }Error
·
Juan Pablo Isaza
1 answers
Answer question0
En este componente cargo dinámicamente el '.js'.
Nota: Este componente existe en un RCL llamado "ChatClient.Core". El archivo .js se coloca dentro de la carpeta wwwroot wwwroot/scripts del RCL.
public partial class Dialog : ComponentBase, IAsyncDisposable { private readonly Lazy<Task<IJSObjectReference>> moduleTask; private DotNetObjectReference<Dialog> dotNetObjectReference; private ElementReference dialogElement; public Dialog() { moduleTask = new(() => jsRuntime!.InvokeAsync<IJSObjectReference>( identifier: "import", args: "./_content/ChatClient.Core/scripts/dialogJsInterop.js") .AsTask()); dotNetObjectReference = DotNetObjectReference.Create(this); } [Inject] private IJSRuntime jsRuntime { get; set; } ... public async ValueTask ShowDialogAsync() { var module = await moduleTask.Value; await module.InvokeVoidAsync(identifier: "showDialog", dialogElement, dotNetObjectReference); } ... public async ValueTask DisposeAsync() { if (moduleTask.IsValueCreated) { var module = await moduleTask.Value; await module.DisposeAsync(); } } } export function showDialog(element, parm) { let dialog = element; let dotNetHelper = parm; dialog.addEventListener('close', () => { dotNetHelper.invokeMethodAsync('OnDialogClosed'); }); return element.showModal(); }
·
Juan Pablo Isaza
Report
Answer question