Blazor动态组件参数无法更新问题求助

问题根源 #

• Alert组件的Message变量仅在初始化时赋值一次，后续SiteId/SiteName参数更新时，不会自动重新计算Message内容
• Display组件虽已更新参数并调用StateHasChanged，但Alert组件缺少响应参数变化的逻辑

修复方案 #

1. 修正Alert组件，响应参数变化 #

两种实现方式任选其一：

方式一：直接在模板中使用参数

@page "/Alert"

@if (!string.IsNullOrWhiteSpace($"{SiteId} {SiteName}"))
{
    <div class="alert alert-primary">
        @SiteId @SiteName
    </div>
}

@code {
    [Parameter] public string? SiteId { get; set; }
    [Parameter] public string? SiteName { get; set; }
}

方式二：通过OnParametersSet更新变量

@page "/Alert"

@if (this.Message is not null)
{
    <div class="alert alert-primary">
        @this.Message
    </div>
}

@code {
    [Parameter] public string? SiteId { get; set; }
    [Parameter] public string? SiteName { get; set; }
    private string? Message;

    protected override void OnParametersSet()
    {
        Message = $"{SiteId} {SiteName}";
        base.OnParametersSet();
    }
}

2. （可选）用@Key强制组件重新渲染 #

如果需要确保参数变化时组件完全重新初始化，可在Display组件的DynamicComponent上添加@Key：

<DynamicComponent Type=@this.ComponentType Parameters=@ComponentParameters @Key="@GetComponentKey()" />

@code
{
    [Parameter] public Type? ComponentType { get; set; }
    private Dictionary<string, object?> ComponentParameters { get; set; } = new();

    public void UpdateParameters(string val1, string val2)
    {
        ComponentParameters = new()
        {
           {"SiteId", val1??string.Empty},
           {"SiteName", val2??string.Empty}
        };
        StateHasChanged();
    }

    private string GetComponentKey()
    {
        return $"{ComponentParameters["SiteId"]}-{ComponentParameters["SiteName"]}";
    }
}

3. 修正Index页面语法错误 #

ClearMessaage方法缺少闭合括号，修正后：

private void ClearMessaage()
{
    _display1.UpdateParameters("","");
}

总结 #

核心问题是Alert组件未响应参数更新，修复该逻辑即可解决大部分场景；@Key是强制组件重新实例化的补充方案，一般情况下无需额外使用。

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