Blazor 在特定组件中包含 javascript 库

Question

我的 Blazor 服务器端应用程序在 _Layout.cshtml 文件中包含几个 js / css 库。但是，在我的一个组件中，我想利用一组额外的 js / css 库来为该 specific 组件添加功能——我不希望这些库全局加载。

有没有一种 Blazor 原生的方法可以做到这一点？我看过很多帖子使用第三方库或某种 hack 来完成此操作（例如 https://github.com/mishelshaji/DynamicJavaScriptInBlazor），但它似乎应该得到原生支持。

Answer 1

使用 IJSRuntime 的延迟加载功能，您可以使用组件动态加载 JavaScript。

在这个组件中，我在 Razor Class 库中延迟加载脚本文件。

代码隐藏方法组件的相关部分：

public partial class Dialog : ComponentBase, IAsyncDisposable
{
    private readonly Lazy<Task<IJSObjectReference>> moduleTask;
    private DotNetObjectReference<Dialog> dotNetObjectReference;
    ...

    public Dialog()
    {
        moduleTask = new(() => jsRuntime!.InvokeAsync<IJSObjectReference>(
            identifier: "import",
            args: "./_content/BlazorDialogs/dialogJsInterop.js")
        .AsTask());

        dotNetObjectReference = DotNetObjectReference.Create(this);
    }

    [Inject]
    private IJSRuntime jsRuntime { get; set; }
...

    public async ValueTask ShowDialogAsync()
    {
        var module = await moduleTask.Value;
        await module.InvokeVoidAsync(identifier: "showDialog", dialogElement, dotNetObjectReference);
        ...
    }

    public async ValueTask CloseDialogAsync()
    {
        var module = await moduleTask.Value;
        await module.InvokeVoidAsync(identifier: "closeDialog", dialogElement);
        ...
    }

    [JSInvokable]
    public void OnDialogClosed()
    {
...
    }

    public async ValueTask DisposeAsync()
    {
        if (moduleTask.IsValueCreated)
        {
            var module = await moduleTask.Value;
            await module.DisposeAsync();
        }
    }
}

注意：OnDialogClosed 是从 JavaScript 调用的。

Repo

Blazor 在特定组件中包含 javascript 库

Blazor include javascript library in specific component

javascript

c#

blazor