Как вызвать метод взаимодействия javascript в разных компонентах на стороне сервера Blazor

Может быть, глупый вопрос. Но есть ли способ повторно использовать методы, вызывающие функции 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
person Mykhailo Bykhovtsev    schedule 08.07.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете создать вспомогательный класс, например, для 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);
    }
}
person Suprabhat Biswal    schedule 09.07.2020
comment
Спасибо за ответ. Это буквально то, что я сделал вчера, я просто забыл обновить этот вопрос. Еще раз спасибо за ответ. - person Mykhailo Bykhovtsev; 09.07.2020

arrow_upward
0
arrow_downward

это идея внедрения зависимостей (DI), статический класс - это своего рода одноэлементный объект DI. Так что не делайте этого, как решила Microsoft. Вы можете инкапсулировать эту логику в класс-оболочку (mylib) и прикрепить ее к списку di в startup.cs, например AddSingleton https://docs.microsoft.com/en-us/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-3.1

person HannesPreishuber    schedule 08.07.2020

arrow_upward
0
arrow_downward

Как упоминал ХаннесПрейшубер, вы можете создать класс и добавить в него все свои методы и использовать этот класс везде через внедрение зависимости. Вот пример кода:

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
    }
}
person Umair    schedule 08.07.2020