blazor - 在 Blazor 应用程序中使用自定义 Razor 组件加载 JS 文件

Question

在我的项目中，我有一个 Components包含两个文件的文件夹:

• Board.razor
  • 在这个文件中我有 <h1>Board component</h1>
• Board.razor.js
  • 在这个文件中，我只有一个 console.log('test');声明

在 Index.razor文件我加载我的自定义组件:

<Board></Board>

当我运行我的应用程序时，我看到我的 Board组件加载成功。

据我了解.js文件应由 Blazor 应用程序自动发现并加载。

所以我的期望是我还应该看到 console.log浏览器控制台窗口中的消息。但这并没有发生。好像我的 JS 文件没有加载？

根据这个 github 对话，应该有对此的支持: https://github.com/dotnet/sdk/pull/19270

我有什么遗漏的吗？还是我的期望是错误的？

---

其他项目信息

我正在 .NET 6.0 上运行客户端 Blazor 应用程序，并且我的应用程序中安装了最新的软件包:

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.7" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.7" PrivateAssets="all" />

Answer 1

虽然它似乎适用于组件级 .css 文件，但它不适用于 .js。您必须显式加载这些文件 -> https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0#load-a-script-from-an-external-javascript-file-js-collocated-with-a-component

下面是我最近使用的一个例子。

在组件中

1. 有几个变量

    [Inject]
    private IJSRuntime JS { get; set; } = default!;
    private IJSObjectReference? _jsModule;
   

2. 重载 OnAfterRenderAsync 方法

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        _jsModule ??= await JS.InvokeAsync<IJSObjectReference>(
            "import", "./Pages/Board.razor.js");
   
        await _jsModule.InvokeVoidAsync("loadBoardJS", parameters);
   
        await base.OnAfterRenderAsync(firstRender);
    }
   

稍微更新一下您的 Board.razor.js 文件

export function loadBoardJS(parameters) {
...
}