MAUI Hybrid App中动态设置SfRichTextEditor内容的参数更新问题

场景说明 #

CIllustrationPage.xaml 包含一个BlazorWebView，其根组件为CIllustration.razor；CIllustration.razor中嵌入了一个需要动态设置内容属性的SfRichTextEditor。

初始尝试（构造函数设置参数） #

在CIllustrationPage.xaml.cs的构造函数中设置组件参数时，SfRichTextEditor能正常显示内容，但此时业务所需的数据还未准备好：

public CIllustrationPage(/*CollegeCategoriesViewModel viewModel*/)
{
    InitializeComponent();

    // 想要传递viewModel数据到组件，但此时viewModel还未初始化完成
    // viewModel会在后续阶段绑定并触发OnBindingContextChanged
    
    rootComponent.Parameters =
    new Dictionary<string, object>
    {
        { "RichTextContent",  "From Constructor"}
    };

    // 模拟viewModel初始化
    BindingContext = "BINDING";
}

数据就绪后设置参数（OnBindingContextChanged） #

于是尝试在数据就绪时机（OnBindingContextChanged方法，用延迟模拟真实数据获取场景）更新参数，但新设置的参数并未同步到SfRichTextEditor，编辑器仍显示"From Constructor"而非"From OnBindingContextChanged"：

protected override async void OnBindingContextChanged()
{
    base.OnBindingContextChanged();
    // await viewModel.Init();

    new Task(async () =>
    {
        await Task.Delay(2000);
        // viewModel.College.Details = @"<h1> College Information</h1>";
        var details = "From OnBindingContextChanged";

        rootComponent.Parameters =
        new Dictionary<string, object>
        {
            { "RichTextContent",  details}
        };
    }).Start();
}

CIllustration.razor代码 #

<div id="Editor" >
<SfRichTextEditor Readonly=true Value=@RichTextContent>
    <RichTextEditorToolbarSettings Enable=false></RichTextEditorToolbarSettings>
</SfRichTextEditor>

@code {
[Parameter]
public string RichTextContent { get; set; }
}

问题原因 #

直接重新赋值rootComponent.Parameters并不会触发Blazor组件的参数变更通知，Blazor需要明确的参数更新触发机制才能重新渲染组件并同步参数值。

解决方案 #

方法1：调用RootComponent.UpdateParametersAsync #

更新参数后，必须调用UpdateParametersAsync方法来通知Blazor组件参数已变更：

protected override async void OnBindingContextChanged()
{
    base.OnBindingContextChanged();

    await Task.Delay(2000);
    var details = "From OnBindingContextChanged";

    var parameters = new Dictionary<string, object>
    {
        { "RichTextContent",  details}
    };
    await rootComponent.UpdateParametersAsync(parameters);
}

注意：避免使用new Task().Start()这种冗余的异步包装，直接用await处理异步逻辑即可，遵循异步代码规范。

方法2：利用绑定上下文联动（推荐） #

如果BindingContext是实际的ViewModel，可直接通过绑定传递参数，无需手动设置：

1. 在CIllustrationPage.xaml中，给BlazorWebView的RootComponent绑定参数：

<BlazorWebView HostPage="wwwroot/index.html">
    <RootComponent Selector="#app" ComponentType="{x:Type local:CIllustration}">
        <Parameter Name="RichTextContent" Value="{Binding College.Details}" />
    </RootComponent>
</BlazorWebView>

2. 确保ViewModel实现INotifyPropertyChanged接口，当College.Details更新时触发属性变更通知，Blazor会自动同步参数到组件。

补充说明 #

• Blazor组件的参数更新依赖框架的变更检测机制，手动修改Parameters字典不会触发检测，必须通过UpdateParametersAsync主动通知框架。
• 异步操作中，除事件处理类方法外，尽量避免使用async void，这里OnBindingContextChanged属于事件方法可保留，但内部逻辑优先用await处理。

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