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

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

假设我有一个具有此功能的

EditBox.razor

组件

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

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

现在我想在其他组件中调用这个方法

Foo.razor

。没有参考，所以是静态的

---

我是否为泛型

Javascript.razor

组件创建了一个静态类模型，我在其中定义了所有由不同组件调用的Javascript互操作，并使所有其他组件继承它？

这就是依赖注入（DI）的思想 静态类是一种DI单例对象。 所以不要按照微软的决定去做。 您可以将此逻辑封装到包装类（mylib）中，并将其附加到startup.cs中的di列表中，如AddSingleton

---

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

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
    }
}

---

您可以为例如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");
}

---

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

@code{

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