Blazor中点击按钮时如何重复触发UserDetails组件的GetUserDetails方法

方式一：监听StateContainer的状态变化 #

既然你用StateContainer管理选中按钮的状态，那可以给StateContainer加个状态变更通知，然后在UserDetails组件里订阅这个事件，每次切到User标签时重新加载数据。

具体操作： #

1. 给StateContainer添加状态变更事件：

public class StateContainer
{
    private string _selectedButton;
    public string SelectedButton
    {
        get => _selectedButton;
        set
        {
            _selectedButton = value;
            OnStateChanged?.Invoke();
        }
    }

    public event Action OnStateChanged;
}

2. 在UserDetails组件里订阅事件并处理：

@inject StateContainer StateContainer
@implements IDisposable

<!-- 你的组件内容 -->

@code {
    protected override async Task OnInitializedAsync()
    {
        StateContainer.OnStateChanged += HandleStateChange;
        await GetUserDetails();
    }

    private async void HandleStateChange()
    {
        if (StateContainer.SelectedButton == "User")
        {
            await GetUserDetails();
        }
    }

    private async Task GetUserDetails()
    {
        // 这里写你的用户详情加载逻辑
    }

    public void Dispose()
    {
        StateContainer.OnStateChanged -= HandleStateChange;
    }
}

方式二：用组件参数触发刷新 #

给UserDetails加个激活状态参数，每次切到User标签时切换这个参数的值，触发组件的参数更新逻辑，进而重新加载数据。

具体操作： #

1. 在弹窗组件里处理参数切换：

@inject StateContainer StateContainer

@if (StateContainer.SelectedButton == "User")
{
    <UserDetails IsActive="@_isUserTabActive" />
}
else if (StateContainer.SelectedButton == "Transactions")
{
    <TransactionsComponent />
}

@code {
    private bool _isUserTabActive;

    protected override void OnInitialized()
    {
        StateContainer.OnStateChanged += HandleStateChange;
    }

    private void HandleStateChange()
    {
        if (StateContainer.SelectedButton == "User")
        {
            _isUserTabActive = !_isUserTabActive; // 切换状态让组件感知更新
        }
    }

    public void Dispose()
    {
        StateContainer.OnStateChanged -= HandleStateChange;
    }
}

2. 在UserDetails组件里处理参数变化：

@code {
    [Parameter]
    public bool IsActive { get; set; }

    protected override async Task SetParametersAsync(ParameterView parameters)
    {
        var oldActiveState = IsActive;
        await base.SetParametersAsync(parameters);
        
        // 只有当激活状态从非激活变激活时，重新加载数据
        if (IsActive && IsActive != oldActiveState)
        {
            await GetUserDetails();
        }
    }

    private async Task GetUserDetails()
    {
        // 用户详情加载逻辑
    }
}

方式三：强制重建组件 #

给UserDetails组件加个@key，每次切到User标签时改变key的值，让Blazor直接重建组件实例，这样OnInitializedAsync会再次执行，自然就调用了GetUserDetails()。

具体操作： #

@inject StateContainer StateContainer

@if (StateContainer.SelectedButton == "User")
{
    <UserDetails @key="_userTabKey" />
}
else if (StateContainer.SelectedButton == "Transactions")
{
    <TransactionsComponent />
}

@code {
    private int _userTabKey;

    protected override void OnInitialized()
    {
        StateContainer.OnStateChanged += HandleStateChange;
    }

    private void HandleStateChange()
    {
        if (StateContainer.SelectedButton == "User")
        {
            _userTabKey++; // 改变key值，触发组件重建
        }
    }

    public void Dispose()
    {
        StateContainer.OnStateChanged -= HandleStateChange;
    }
}

这三种方式都能解决你的问题，选哪种看你的项目习惯：第一种是监听状态变更，比较符合状态管理的思路；第二种通过参数控制，逻辑更清晰；第三种最直接，适合快速解决问题。

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