Blazor .NET 8中Bootstrap画廊刷新问题求助

问题根源 #

你当前的代码仅在组件第一次渲染时初始化画廊，但通配路由加载新文章时，ArticleView组件并未被销毁重建，firstRender不会再次触发，导致新文章的画廊未初始化，旧画廊实例残留，所以显示上一篇文章的图片。

方案一：用@key强制组件重建 #

在index.razor的DynamicComponent上绑定@key为当前路由参数，路由变化时组件会彻底销毁重建，firstRender会重新触发，自动初始化新画廊：

<DynamicComponent Type="ArticleView" @key="@pageRoute" />

注：这里的pageRoute是你从通配路由中获取的参数，确保每次新文章的路由不同时，@key值也不同。

方案二：监听文章内容变化，重新初始化画廊 #

不依赖firstRender，而是在文章内容更新时先销毁旧画廊，再初始化新的：

1. 先在JS中添加销毁画廊的方法：

function destroyBootstrapCarousel(elementId) {
    const carousel = bootstrap.Carousel.getOrCreateInstance(document.getElementById(elementId));
    carousel.dispose();
}

2. 修改ArticleView的OnAfterRenderAsync方法：

private object? _prevDocumentView;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (DocumentView != null && DocumentView != _prevDocumentView)
    {
        // 销毁旧画廊实例
        await JSRuntime.InvokeVoidAsync("destroyBootstrapCarousel", "carousel");
        // 初始化新画廊
        await JSRuntime.InvokeVoidAsync("initializeBootstrapCarousel", "carousel");
        _prevDocumentView = DocumentView;
    }
}

每次DocumentView更新（新文章加载完成），都会自动处理画廊的销毁与重建。

方案三：通过组件参数变化触发初始化 #

给ArticleView添加一个接收当前路由的参数，参数变化时触发画廊更新：

[Parameter]
public string CurrentRoute { get; set; } = string.Empty;

private string? _prevRoute;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (CurrentRoute != _prevRoute)
    {
        await JSRuntime.InvokeVoidAsync("destroyBootstrapCarousel", "carousel");
        await JSRuntime.InvokeVoidAsync("initializeBootstrapCarousel", "carousel");
        _prevRoute = CurrentRoute;
    }
}

在index.razor中传递该参数：

<DynamicComponent Type="ArticleView" Parameters="@(new { CurrentRoute = pageRoute })" />

内容的提问来源于stack exchange，提问作者user2435866