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

Question

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

假设我有一个EditBox.razor组件，它有这个功能

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

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

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

Answer 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");
}

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

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

Answer 2

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

Answer 3

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