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列表中，例如AddSingleton https://docs.microsoft.com/en-us/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-3.1

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

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

3 个答案: