如何在 Blazor 服务器端的不同组件中调用 javascript 互操作方法答案

【问题标题】：How to call javascript interop method in different components in Blazor server side如何在 Blazor 服务器端的不同组件中调用 javascript 互操作方法
【发布时间】：2020-10-29 06:54:35
【问题描述】：

可能是一个愚蠢的问题。但是有没有办法重用在运行时调用 Javascript 函数的方法？

假设我有 EditBox.razor 具有此功能的组件

@inject IJSRuntime JSRuntime
...
Some HTML code
...

@code{
...
    private async Task RenderSyntax()
    {
        await JSRuntime.InvokeVoidAsync("Prism.highlightAll");
    }
...

现在我想在其他一些组件Foo.razor 中调用这个方法。没有参考，所以是静态的。

我是否为通用 Javascript.razor 组件创建静态类模型，在其中定义由不同组件调用的所有 javascript 互操作并让所有其他组件继承它？

【问题讨论】：

标签： blazor blazor-server-side

【解决方案1】：

您可以创建一个帮助类，例如JSInteropHelper。这将有您想要在多个页面中使用的可重用方法。

// Have kept the method as static so I don't need to create a instance of it.
internal static ValueTask<object> HighlightText(IJSRuntime jsRuntime)
{
    return jsRuntime.InvokeAsync<object>("Prism.highlightAll");
}

在您的 razor 组件中，您可以将 JSRuntime 作为参数传递。

@code{

    private async Task RenderSyntax()
    {
        await JSInteropHelper.HighlightText(JSRuntime);
    }
}

【讨论】：

感谢您的回答。这就是我昨天所做的，我只是忘了更新这个问题。再次感谢您的回答。

【解决方案2】：

这就是依赖注入（DI）的思想静态类是一种 DI 单例对象。所以不要采取微软决定的方式。您可以将此逻辑封装到包装类 (mylib) 中，并将其附加到 startup.cs 中的 di 列表，如 AddSingleton https://docs.microsoft.com/en-us/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-3.1

【讨论】：

【解决方案3】：

正如 HannesPreishuber 所提到的，您可以创建一个类并在其中添加所有方法，然后通过 dependency injection 在任何地方使用该类。这是一个示例代码：

public class JsMethods : IJsMethods
{
    private readonly IJSRuntime _jSRuntime;

    public JsMethods(IJSRuntime jsRuntime)
    {
        _jSRuntime = jSRuntime;
    }

    public async Task RenderSyntax(string identifier)
    {
        //.. some other code

        await JSRuntime.InvokeVoidAsync(identifier);

        //.. some other code
    }
}

【讨论】：