在Blazor应用程序中加载带有自定义剃须刀组件的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#从外部加载脚本javascript-file-js与组件并置

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

组件内

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.rarzor.js文件一点

export function loadBoardJS(parameters) {
...
}