Blazor DynamicComponent切换Type时重复显示组件问题求助

问题原因分析 #

1. 服务属性变化未通知UI：原服务的_type是普通公共属性，修改时不会触发Blazor的UI刷新机制，组件无法及时响应类型变化。
2. DynamicComponent未强制销毁旧实例：Blazor默认会尝试复用组件实例，Type变化时可能未正确销毁旧组件，导致新旧组件同时存在。
3. 可能存在属性绑定错误：原代码中服务属性名为_type，但Razor中绑定的是Type，属性名称不匹配会导致绑定失效。

解决方案步骤 #

1. 修改服务实现属性变化通知

让服务实现INotifyPropertyChanged接口，确保属性变化时主动通知UI组件：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class BfMainPageComponentService : IBfMainPageComponentService, INotifyPropertyChanged
{
    private Type _currentType = typeof(CurrencyRatesViewer);

    // 规范命名的公共属性，供UI绑定
    public Type CurrentType
    {
        get => _currentType;
        set
        {
            if (_currentType != value)
            {
                _currentType = value;
                OnPropertyChanged();
            }
        }
    }

    public void MainPageComponentChanged(Type type)
    {
        if (type != null)
        {
            CurrentType = type;
        }
    }

    // 属性变化事件
    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改页面组件绑定与刷新逻辑

在页面中订阅服务的属性变化事件，强制刷新UI，并给DynamicComponent添加@key强制销毁旧实例：

@page "/"
@implements IDisposable

@if (_loadSettingCompleted)
{
    <HeaderNavMenu SelectDialog="OnSelectDialog" ReloadSettings="OnReloadSettings"/>
    <div class="d-flex flex-column" style="min-height: 100%; position:relative;">
        <DialogProvider />
        
        <!-- 添加@key确保Type变化时销毁旧组件 -->
        <DynamicComponent Type="@_bfMainPageComponentService.CurrentType" 
                         @key="@_bfMainPageComponentService.CurrentType"/>
        
        <BfMessageDialogProvider />
    </div>

    <MonitorActivity />
    <TokenRefresher />
    <PrintedReportProvider />
    <ReportLoaderProvider />
}

@code {
    [Inject]
    private IBfMainPageComponentService _bfMainPageComponentService { get; set; }

    private bool _loadSettingCompleted;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        // 初始化加载设置完成逻辑（根据实际业务调整）
        _loadSettingCompleted = true;

        // 订阅服务属性变化事件
        if (_bfMainPageComponentService is INotifyPropertyChanged notifyService)
        {
            notifyService.PropertyChanged += OnComponentTypeChanged;
        }
    }

    private void OnComponentTypeChanged(object? sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(BfMainPageComponentService.CurrentType))
        {
            // 触发UI刷新
            StateHasChanged();
        }
    }

    // 取消订阅避免内存泄漏
    public void Dispose()
    {
        if (_bfMainPageComponentService is INotifyPropertyChanged notifyService)
        {
            notifyService.PropertyChanged -= OnComponentTypeChanged;
        }
    }

    // 实现页面所需的其他方法
    private void OnSelectDialog()
    {
        // 业务逻辑
    }

    private void OnReloadSettings()
    {
        // 业务逻辑
    }
}

3. 确保服务注册正确

在Program.cs中确认服务注册为Scoped（Blazor WebAssembly/Server通用）：

builder.Services.AddScoped<IBfMainPageComponentService, BfMainPageComponentService>();

关键说明 #

• @key的作用：当CurrentType变化时，Blazor会识别到DynamicComponent的key值改变，从而销毁旧组件实例，创建新实例，彻底避免旧组件残留。
• INotifyPropertyChanged的作用：确保服务属性变化时，页面组件能及时收到通知并刷新UI，保证DynamicComponent的Type绑定始终最新。
• 取消订阅事件：页面销毁时取消订阅服务的事件，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Кадырбек Асылбек уулу