Blazor JSRuntime在组件中导入javascript文件并在多个页面上使用时出现问题 &

Question

我有一个使用.js文件运行的模态组件。为了附加JavaScript，我在OnAfterRenderAsync函数中调用。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var libraryName = GetType().Assembly.GetName().Name;
await JSRuntime.InvokeAsync<IJSObjectReference>("import", $"./_content/{libraryName}/scripts/aria.modal.min.js");
}
}

当我把这个组件放在某个页面上时，它工作得很好。但是，当我在不同的页面上调用相同的组件并从一个页面导航到另一个页面时，脚本加载失败，没有任何错误，除非我重新加载页面，否则模式不会打开。

我试着调用简单的.js文件，只有一行代码alert("bla");，同样的事情发生了。它在我第一次导航到该页面时工作，然后当我导航到具有相同组件的另一个页面时，脚本失败，没有任何错误。

@inject IJSRuntime JSRuntime
<div id="@Id" data-modal data-modal-manual-close hidden class="c-modal @Id-modal" role="dialog" tabindex="-1">
<div data-modal-document role="document">
@if (!hasBody)
{
<h2 class="c-modal__title @Id-modal__head" id="tableLabel">
@HeaderContent
</h2>
<div class="c-modal__body @Id-modal__body">
@BodyContent
</div>
<footer class="c-modal__footer @Id-modal__footer">
<button class="btn btn--primary">Select</button>
<button data-modal-close-btn class="btn btn--outline">Cancel</button>
</footer>
<button data-modal-close-btn aria-labelledby="close-button-label" class="btn c-modal__close-btn">
<span id="close-button-label" hidden>Close</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
<path d="M18.4652 8.15127L13.6165 13L18.4652 17.8487L16.849 19.465L12.0002 14.6162L7.1515 19.465L5.53526 17.8487L10.384 13L5.53526 8.15127L7.1515 6.53502L12.0002 11.3838L16.849 6.53502L18.4652 8.15127Z" fill="currentColor" />
</svg>
</button>
}
else
{
@BodyContent
}
</div>
</div>
@code {
[Parameter]
public bool hasBody { get; set; }
[Parameter]
public RenderFragment BodyContent { get; set; }
[Parameter]
public RenderFragment HeaderContent { get; set; }
[Parameter] public string Id { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var libraryName = GetType().Assembly.GetName().Name;
await JSRuntime.InvokeAsync<IJSObjectReference>("import", $"./_content/{libraryName}/scripts/aria.modal.min.js");
}
}
}

Answer 1

我认为您需要在剃刀页面中实现Dispose。如:

...
@implements IAsyncDisposable
...
@code {
private IJSObjectReference module;
...
module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", $"./_content/{libraryName}/scripts/aria.modal.min.js");
...
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
await module.DisposeAsync();
}
}