在 Blazor 应用程序中使用自定义剃刀组件加载 JS 文件

Question

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

• 剃须刀
  • 在这个文件中我有<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

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

---

附加项目信息

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

<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-外部 javascript 文件 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.razor.js文件

export function loadBoardJS(parameters) {
...
}