Blazor JS 互操作调用混淆答案

【问题标题】：Blazor JS Interop call confusionBlazor JS 互操作调用混淆
【发布时间】：2020-11-08 23:09:07
【问题描述】：

以下有两个错误类型的语法错误，但是，我找不到任何关于如何使用它以及我做错了什么的文档。我应该给这个open 函数提供什么参数？

    Syntax error 1 - Argument 2: cannot convert from 'string' to 'System.Threading.CancellationToken'   
    Syntax error 2 - Argument 3: cannot convert from 'string' to 'object[]'

private async Task HelloWorld()
{
       string url = "https://www.google.com";
       await JSRuntime.InvokeAsync<object>("open", url, "_blank");
}

【问题讨论】：

根据方法签名，我希望它类似于 await JSRuntime.InvokeAsync<object>("open", new object[] { url, "_blank" });：docs.microsoft.com/en-us/dotnet/api/…
这将抛出以下An object reference is required for the non-static field, method, or property 'JSRuntime.InvokeAsync<object>(string, object[])' 这是我试图开始工作的东西，但我显然错过了一些东西。
嗯，你需要有一个实例，它可以被注入，如下所述：docs.microsoft.com/en-us/aspnet/core/blazor/…
这看起来有点矫枉过正，这一切都不是必要的，对吧？我一直在读它，这似乎很荒谬。
我想这是唯一的方法。谢谢！

标签： javascript c# blazor

【解决方案1】：

JSRuntime 是一个没有静态方法的抽象类，所以你不能调用类本身的InvokeAsync 方法。要执行 javascript，您必须注入一个 IJSRuntime 对象：

public class MyClass{
  
 private readonly IJSRuntime js;
 public MyClass(IJSRuntime js){
       this.js=js;
   }

    private async Task HelloWorld()
    {
           string url = "https://www.google.com";
           await js.InvokeAsync<object>("open", url, "_blank");
    }
}

【讨论】：

【解决方案2】：

在不查看更多代码的情况下判断实际发生了什么有点棘手，无论是在 JS 端还是在 Razor 端。但是，这里有一个在 C# 代码中调用 JS 函数的简单示例。顺便说一句，我假设（希望是正确的！）您是在组件中执行此操作，因为它们的代码在类中调用它时略有不同。此外，看看你从 JS 方法返回了什么（如果有的话）会很有帮助：

@inject IJSRuntime JSRuntime

@code {
    private async Task HelloWorld()
    {
        string url = "https://www.google.com";
        await JSRuntime.InvokeAsync<object>("open", url, "_blank");
    }
}

<script>
    window.open = function (url, target) {
        console.log(url, target)
    }
</script>

【讨论】：

【解决方案3】：

就我而言，我在页面顶部有这个：

@inject IJSRuntime JsRuntime;

我的方法是这样的：

private async void OpenSettings()
{
    await JSRuntime.InvokeAsync<object>("Alert", nameof(OpenSettings));
}

显然我打错了，所以我打电话给JSRuntime而不是JsRuntime（注意小“s”）。

【讨论】：