如何在Blazor组件中引用本地JS模块

Question

两周前在Dotnetconf上，我听说现在可以在Blazor组件中包含本地Javascript文件。听起来很有趣。我想方法仍然是使用JSIniterop并引用模块文件。

但是你是如何引用JS文件的？？？我尝试了所有可能的创造性变体，但到目前为止都没有成功。

我很惊讶谷歌到处都是，但还没有找到这方面的指南或样本。感谢所有提示。

Answer 1

您可以在.razor.cs文件旁边创建.js代码文件，并在运行时加载该文件。这里有描述。我还在这里找到了这个功能的演示，在这里找到了github repo。

假设您在Pages文件夹中有ComponentA和ComponentA.razor、ComponentA.razor.cs和ComponentA.razor.js文件。您可以在组件初始化期间加载此模块，如下所示：

[Inject]
public IJSRuntime JS { get; set; }
private IJSObjectReference module { get; set; }
protected override async Task OnInitializedAsync()
{
module = await JS.InvokeAsync<IJSObjectReference>("import", "./Pages/ComponentA.razor.js");
}

但是，如果您的组件是在组件库项目中定义的，则必须使用不同的文件路径。例如，如果您的项目名为AppComponents，则此路径将为./_content/AppComponents/ComponentA.razor.js。

Answer 2

给定ComponentLibrary.Blazor项目和Components文件夹中名为MyComponent.razor的组件。您可以通过在文件MyComponent.razor.js后面创建JavaScript代码并导入具有正确路径./_content/ComponentLibrary.Blazor/Component/MyComponent.razor.js的文件来包含并置的JavaScript文件。

MyComponent.razor

<div @ref="_elementReference">Hello world!</div>

MyComponent.razor.cs:

public partial class MyComponent {
private IJSObjectReference? _collocatedJs;
private ElementReference _elementReference;
[Inject]
public required IJSRuntime JsRuntime { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender) {
await base.OnAfterRenderAsync(firstRender);
_collocatedJs ??= await JsRuntime.InvokeAsync<IJSObjectReference>(
"import",
"./_content/ComponentLibrary.Blazor/Component/MyComponent.razor.js");
}
public async Task InvokeJavaScriptFunction() {
if (_collocatedJs != null) {
await _collocatedJs.InvokeVoidAsync("doJavaScriptWork", _elementReference);
}
}
}

MyComponent.razor.js

export function doJavaScriptWork(elementReference) {
console.log(elementReference);
}