Blazor 在特定组件中包含 javascript 库

Question

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

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

Answer 1

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

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

方法组件背后代码的相关部分：

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 调用的。

回购