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

回購