从组件类库调用 JavaScript 方法时出现 Blazor Maui 问题。相同的代码适用于 Blazor WebAssembly 应用程序

Question

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

\n

{\nvar module = await moduleTask.Value;\nreturn await module.InvokeAsync<string>(\xe2\x80\x9cshowPrompt\xe2\x80\x9d, message);\n}\n

\n

第二个包装器使用 JSRuntime JS

\n

{\nreturn await JS.InvokeAsync<string>(\xe2\x80\x9cshowPrompt\xe2\x80\x9d, message);\n}\n

\n

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

\n

@inject ExampleJsInterop exampleJsWithModule\n@inject IJSRuntime js\n@inject ExampleJsInteropWithJSRunTime exampleJsRunTime\n<div class=\xe2\x80\x9cmy-component\xe2\x80\x9d>\nThis component is defined in the <strong>RazorClassLibrary</strong> library.\n<button class=\xe2\x80\x9cbtn btn-primary\xe2\x80\x9d @onclick=\xe2\x80\x9cCallJSFunctionFromCSWithModule\xe2\x80\x9d>Call JS function from C# with Module</button>\n<button class=\xe2\x80\x9cbtn btn-primary\xe2\x80\x9d @onclick=\xe2\x80\x9cCallJSFunctionFromCSWithJSruntime\xe2\x80\x9d>Call JS function from C# With JSruntime</button>\n<button class=\xe2\x80\x9cbtn btn-primary\xe2\x80\x9d @onclick=\xe2\x80\x9cCallJSFunctionFromScript\xe2\x80\x9d>Call JS function from script</button>\n</div>\n@code{\nprivate async void CallJSFunctionFromCSWithModule()\n{\n    await exampleJsWithModule.Prompt("Hello, this does not work!");\n}\nprivate async void CallJSFunctionFromCSWithJSruntime()\n{\n    await exampleJsRunTime.Prompt("Hello, this does not work!");\n}\nprivate async void CallJSFunctionFromScript()\n{\n      await js.InvokeAsync<string>("showPromptFromJS", "Hello, this work!");\n}\n}\n

\n

只有 CallJSFunctionFromScript 有效。\nCallJSFunctionFromCSWithJSruntime 和 CallJSFunctionFromCSWithModule 失败。\n我已在 MauiProgram.cs 中调用：

\n

builder.Services.AddSingleton<ExampleJsInterop>();\nbuilder.Services.AddSingleton<ExampleJsInteropWithJSRunTime>();\n

\n

我在index.html中也有：

\n

<script src=\xe2\x80\x9c./_content/RazorClassLibrary/exampleJsInterop.js\xe2\x80\x9d></script>\n<script src=\xe2\x80\x9c./_content/RazorClassLibrary/JsInterop.js\xe2\x80\x9d></script>\n

\n

但是，如果我创建一个 blazor WebAssembly 应用程序而不是 Blazor Maui 应用程序\nCallJSFunctionFromScript 和 CallJSFunctionFromCSWithJSruntime 可以工作，但不能 CallJSFunctionFromCSWithModule 。\n为什么 CallJSFunctionFromCSWithJSruntime 和 CallJSFunctionFromCSWithModule 在 Blazor Maui 中失败？\n以及为什么 CallJSFunctionFromCSWithJSruntime 在 Blazor WebAssembly 应用程序中工作而不是在 Blazor 中工作毛伊岛？\n错误我得到的是：

\n

System.NullReferenceException\nHResult = 0x80004003\nMessage=Object reference not set to an instance of an object.\nSource=Microsoft.AspNetCore.Components.WebView\nStackTrace:\nat Microsoft.AspNetCore.Components.WebView.Services.WebViewJSRuntime.BeginInvokeJS(Int64 taskId, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)\nat Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)\nat 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()\nat System.Runtime.CompilerServices.ValueTaskAwaiter`1.GetResult()\nat RazorClassLibrary.ExampleJsInteropWithJSRunTime.<Prompt>d__2.MoveNext() in C:\\Project\\MauiBlazorApp2\\RazorClassLibrary\\ExampleJsInterop.cs:line 24\nThis exception was originally thrown at this call stack:\n[External Code]\nRazorClassLibrary.ExampleJsInteropWithJSRunTime.Prompt(string) in ExampleJsInterop.cs\n

\n

谢谢

\n

更新：\n显然，如果我使用\nbuilder.Services.AddScoped();\而不是\nbuilder.Services.AddSingleton();\nCallJSFunctionFromCSWithJSruntime 有效。\n为什么 Blazor 应用程序可与 Singleton 配合使用，而 Maui Blaxor 需要 Scoped？\n还有使用默认生成的代码调用 javascript，使用 module+import js 文件会失败，无论是作用域还是单例？

\n

Answer 1

从当前版本（rc2）中的 blazor 混合应用程序调用 js。你需要更换AddSingleton为AddScoped