Blazor中如何将父组件的日期参数传递给子模态框组件

问题原因 #

父组件中已经完成日期字段赋值，但调用子组件时未将该值作为组件参数传入，子组件作用域无法访问父组件的私有字段_studentReportingViewModel，因此模态框无法展示对应日期。

具体实现步骤 #

• 1. 子组件定义接收参数
     在ConfirmEnrollmentModal组件的代码块中，添加带[Parameter]特性的公共属性用于接收日期值，属性类型和SchoolYear的实际类型保持一致即可：

@code {
    // 保留原有已定义的参数
    [Parameter]
    public object EnrollmentConfirmations { get; set; }
    [Parameter]
    public EventCallback CloseConfirmEnrollmentModal { get; set; }

    // 新增日期接收参数
    [Parameter]
    public DateTime? SchoolYear { get; set; }
}

如果你的SchoolYear是自定义引用类型（比如专门的学年类、字符串类型），把上面DateTime?替换成对应类型即可。

• 2. 父组件调用子组件时绑定传值
     修改父组件EnrollmentForm.razor中渲染子组件的代码，补充日期参数的绑定，把父组件中已赋值的字段传给子组件：

@if (_displayEnrollmentModal)
{
    <ConfirmEnrollmentModal 
        EnrollmentConfirmations="EnrollmentConfirmations" 
        CloseConfirmEnrollmentModal="CloseConfirmEnrollmentModalAsync"
        SchoolYear="_studentReportingViewModel.SchoolYear"
    />
}

• 3. 子组件模态框中渲染日期值
     替换子组件中原来的--setDateProp--占位内容，直接渲染传入的参数即可，建议加空值校验避免渲染异常：

<div class="alert alert-warning mt-3 p-2" role="alert">
    当前选择入学学年：@(SchoolYear?.ToString("yyyy-MM-dd") ?? "未选择日期")
</div>

ToString方法中的格式串可以根据实际展示需求调整。

常见异常处理 #

如果使用第三方UI组件库的模态框，出现首次打开值不刷新的情况，在子组件中添加如下生命周期方法强制刷新状态即可：

protected override void OnParametersSet()
{
    base.OnParametersSet();
    StateHasChanged();
}

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