Blazor 中的 js 互操作的静态扩展如何工作？答案

【问题标题】：How does static extension work for js interop in Blazor?Blazor 中的 js 互操作的静态扩展如何工作？
【发布时间】：2021-02-04 19:17:50
【问题描述】：

我已经设法让代码如此平静。

Blazor html：

@inject IJSRuntime js
<button @onclick="Delete">Delete</button>

函数删除()：

private async Task Delete()
    {
        var confirmed = await js.Confirm($"Are you sure you want to delete?");
    }

静态扩展：

    public static class IJSRuntimeExtensionMethods
    {
        public static async ValueTask<bool> Confirm(this IJSRuntime js, string message)
        {
            return await js.InvokeAsync<bool>("confirm", message);
        }
    }

此代码使 javascript 确认弹出。

我的问题是它是如何工作的？

最令人困惑的部分是：

var confirmed = await js.Confirm($"Are you sure you want to delete?");

为什么我们可以只写Confirm，而不能写IJSRuntimeExtensionMethodsInstance.Confirm？

为什么我们还需要在这个位js.？

它是如何通过js.Confirm($"Are you sure you want to delete?") 传递到静态扩展的，或者js 之后的点符号到底在做什么？

【问题讨论】：

这能回答你的问题吗？ "this" in function parameter

标签： c# blazor .net-5 blazor-jsinterop

【解决方案1】：

扩展方法是一种语言特性，它允许您扩展任何类或接口的行为。基本上，这只是简化对静态方法的调用并使其看起来像对实例方法的调用的语法糖。

在扩展方法的声明中注意this 在IJSRuntime js 之前。这意味着该方法扩展 IJSRuntime 类型：

public static async ValueTask<bool> Confirm(this IJSRuntime js, string message)

在后台调用

js.Confirm("text");

被翻译成

IJSRuntimeExtensionMethodsInstance.Confirm(js, "text");

你也可以这样调用方法！

【讨论】：