在 Blazor 中更新父组件后重新加载子组件

Question

我的应用程序中有一些项目的详细信息页面。此详细信息页面包含一个概述部分和概述部分下的几个选项卡。

用户可以更新概览部分，更新成功后我需要重新加载概览部分下的选项卡。

我正在使用 MatBlazor 来呈现选项卡。我需要在父组件更新后重新呈现选项卡。典型的方法是将回调传递给子组件。但是这里的子组件（具体来说是选项卡）是 RenderFragment，它是一个委托。这是父组件中选项卡的剃刀代码部分：

    <div class="jds-shadow-soft-xxs jds-radius-l min-height100p pt1">
        <MatTabGroup Class="jobTabs">
            @foreach (var tab in tabs)
            {
                <MatTab>
                    <LabelContent>
                        @tab.Label
                    </LabelContent>
                    <ChildContent>
                        @tab.Content
                    </ChildContent>
                </MatTab>
            }
        </MatTabGroup>
    </div>

MatBlazor 使用 RenderFragment 渲染选项卡内容。这是我在 RenderFragment

选项卡的父组件中的代码

List<JobConfiguartionTabItem> tabs = new List<JobConfiguartionTabItem>();

protected override async Task OnInitializedAsync()
    {
        try
        {
            tabs.AddRange(new List<JobConfiguartionTabItem> {
                new JobConfiguartionTabItem(){Label = "Scheduled Activities",Content = GetRenderFragment(typeof(JobTemplateScheduleActivityComponent))},
                new JobConfiguartionTabItem(){Label = "Account Selection",Content = GetRenderFragment(typeof(AccountSelectionComponent))},
                new JobConfiguartionTabItem(){Label = "Schedule",Content = GetRenderFragment(typeof(JobTemplateScheduleComponent))},
                new JobConfiguartionTabItem(){Label = "Scheduled History",Content = GetRenderFragment(typeof(JobTemplateScheduledJobComponent))}
            }
            );

            // fetching initial data for the parent component
            await this.GetData();
        }
        catch (Exception exp)
        {
            Console.WriteLine("Error: " + exp);
        }
    }

这是JobConfigurationTabItemclass

public class JobConfiguartionTabItem
{
    public string Label { get; set; }
    public RenderFragment Content { get; set; }
}

这里是父组件中的GetRenderFragment方法

private RenderFragment GetRenderFragment(Type component)
    {
        RenderFragment renderFragment = renderTreeBuilder =>
        {
            renderTreeBuilder.OpenComponent(0, component);
            renderTreeBuilder.CloseComponent();
        };
        return renderFragment;
    }

为了简化我的要求：我需要从父组件引发一个事件，子组件应该使用处理程序方法处理该事件。在我的例子中，子组件是 RenderFragment。我找不到通过RenderFragment实现的方法。

Answer 1

好的，我已经解决了这个问题。我的情况是 Parent 组件需要与 child 组件通信。当 parent 更新时，它需要告诉 child 自己重新加载/ re-render。

一种典型的方法是在 parent 的 child 标记中放置一个 @ref 关键字来捕获引用。然后我们可以通过 ref.

调用 child 的任何方法

在我的例子中，我使用的是 RenderFragment，它不是 child 的实例，而是委托。

我重构了 GetRenderFragment 方法来捕获目标 child 的引用。

private JobTemplateScheduleActivityComponent jobTemplateScheduleActivityComponent { get; set; }
private RenderFragment GetRenderFragment(Type component)
    {
        RenderFragment renderFragment = renderTreeBuilder =>
        {
            renderTreeBuilder.OpenComponent(0, component);
            if (component == typeof(JobTemplateScheduleActivityComponent))
            {
                // capturring RenderFragment component reference
                renderTreeBuilder.AddComponentReferenceCapture(1, (_value =>
                {
                    jobTemplateScheduleActivityComponent = (JobTemplateScheduleActivityComponent)_value;
                }));
            }
            
            renderTreeBuilder.CloseComponent();
            
        };
        return renderFragment;
    }

我在parent到运行更新后有如下方法：

protected async Task RunAfterUpdate()
    {
        await this.GetData();
        // calling the reload method of the target child 
        await jobTemplateScheduleActivityComponent.Reload();
        StateHasChanged();
    }

RenderTreeBuilder.AddComponentReferenceCapture 是我寻找的捕获 RenderFragment.

引用的方法

在 Blazor 中更新父组件后重新加载子组件

Reload child component after updating parent in Blazor

c#

asp.net-core

blazor

matblazor