Blazor服务器:导入库，然后立即从中调用一个方法

Question

我正试图将一个Javascript文件导入组件OnAfterRenderAsync，然后立即从中调用一个函数。我尝试了所有方法，但似乎都不起作用。我总是得到一个"；找不到"函数名"；例外我试着在窗口对象中添加对函数的引用，但这只是将异常变形为"函数名"未定义ReferenceError"；。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("import", "./scripts/TestJS.js");
await JSRuntime.InvokeVoidAsync("functionName", "strMsg");
}
}

这就是我试图调用的简单JS函数

function functionName(strMsg){
console.log(strMsg);
}

我还试着把导入调用包装成一个Task。在文件加载完成之前，我一直在想我调用的是JS方法。断点和观察DOM加载证明，在我尝试从文件中调用方法之前，JS已加载到具有304状态的页面上。

Task.Run(() => JSRuntime.InvokeVoidAsync("import", "./scripts/TestJS.js")).Wait();
await JSRuntime.InvokeVoidAsync("functionName", "strMsg");

如果我添加JS，然后从一个单独的事件中调用一个函数，似乎一切都很好，但我必须弄清楚如何导入JS文件，然后立即能够调用它。如果有人能帮忙，我将不胜感激。如果需要更多的代码，我可以提供。

Answer 1

您的第一个调用应该返回一个IJSObjectReference，然后使用该引用来调用JS模块函数。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/TestJS.js");
await module.InvokeVoidAsync("functionName", "strMsg");
}
}

您还需要在函数中添加export关键字：

export function functionName(strMsg){
console.log(strMsg);
}

JavaScript模块中的JavaScript隔离