从组件类库调用JavaScript方法时出现Blazor Maui问题.同样的代码适用于Blazor WebAssemb

Question

我创建了一个简单的Blazor MAUI项目。我添加了一个简单的Razor类库，其中包含两个JavaScript文件，一个带有三个按钮的简单Razor组件，以及两个用于JavaScript方法调用的C#包装器类。其中一个JavaScript文件使用export关键字，另一个不使用。第一个包装类使用默认方法代码生成的

{
var module = await moduleTask.Value;
return await module.InvokeAsync<string>(“showPrompt”, message);
}

第二个包装器使用JSRuntime JS

{
return await JS.InvokeAsync<string>(“showPrompt”, message);
}

我的基本Razor组件定义如下：

@inject ExampleJsInterop exampleJsWithModule
@inject IJSRuntime js
@inject ExampleJsInteropWithJSRunTime exampleJsRunTime
<div class=“my-component”>
This component is defined in the <strong>RazorClassLibrary</strong> library.
<button class=“btn btn-primary” @onclick=“CallJSFunctionFromCSWithModule”>Call JS function from C# with Module</button>
<button class=“btn btn-primary” @onclick=“CallJSFunctionFromCSWithJSruntime”>Call JS function from C# With JSruntime</button>
<button class=“btn btn-primary” @onclick=“CallJSFunctionFromScript”>Call JS function from script</button>
</div>
@code{
private async void CallJSFunctionFromCSWithModule()
{
await exampleJsWithModule.Prompt("Hello, this does not work!");
}
private async void CallJSFunctionFromCSWithJSruntime()
{
await exampleJsRunTime.Prompt("Hello, this does not work!");
}
private async void CallJSFunctionFromScript()
{
await js.InvokeAsync<string>("showPromptFromJS", "Hello, this work!");
}
}

只有CallJSFunctionFromScript有效。CallJSFunctionFromCSWithJS运行时和CallJSFunctionFROCSWithModule失败。我打电话到MauiProgram.cs:

builder.Services.AddSingleton<ExampleJsInterop>();
builder.Services.AddSingleton<ExampleJsInteropWithJSRunTime>();

我在index.html:中也有

<script src=“./_content/RazorClassLibrary/exampleJsInterop.js”></script>
<script src=“./_content/RazorClassLibrary/JsInterop.js”></script>

然而，如果我创建一个blazor WebAssembly应用程序而不是blazor Maui应用程序CallJSFunctionFromScript和CallJSFunctionfromCSWithJS运行时可以工作，但不能工作。为什么CallJSFunctionFromCSWithJSruntime和CallJSFunctionFromCSWithModule在Blazor Maui失败？为什么CallJSFunctionFromCSWithJSruntime在Blazor WebAssembly应用程序中有效，而在Blazor-Maui中无效？我得到的错误是：

System.NullReferenceException
HResult = 0x80004003
Message=Object reference not set to an instance of an object.
Source=Microsoft.AspNetCore.Components.WebView
StackTrace:
at Microsoft.AspNetCore.Components.WebView.Services.WebViewJSRuntime.BeginInvokeJS(Int64 taskId, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__161.MoveNext() at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Threading.Tasks.ValueTask1.get_Result()
at System.Runtime.CompilerServices.ValueTaskAwaiter`1.GetResult()
at RazorClassLibrary.ExampleJsInteropWithJSRunTime.<Prompt>d__2.MoveNext() in C:ProjectMauiBlazorApp2RazorClassLibraryExampleJsInterop.cs:line 24
This exception was originally thrown at this call stack:
[External Code]
RazorClassLibrary.ExampleJsInteropWithJSRunTime.Prompt(string) in ExampleJsInterop.cs

谢谢

更新：如果我使用建设者服务。AddScoped((；而不是建设者服务。AddSingleton((；CallJSFunctionFromCSWithJSruntime有效。为什么Blazor应用程序适用于Singleton，而Maui Blaxor需要Scoped？同样，使用默认生成的代码，使用模块+导入js文件的javascript调用失败，是scoped还是singleton？

Answer 1

从当前版本(rc2(中的blazor混合应用程序调用js。您需要将AddSingleton替换为AddScoped