Blazor - 将函数传递给动态组件

Question

我希望通过 Blazor 中的 DynamicComponent 在组件之间进行流畅的通信。 因此，我想知道是否可以将函数传递给 DynamicComponent，因为现在它不知道 将被 呈现的组件需要一个函数才能完全运行。欢迎所有建议。

Index.razor

@page "/"

/*This is where I'd like for all of my components to get rendered cleanly*/
<DynamicComponent Type="selectedType" /*Here I'd like to pass a function "GoToComponent"*/ />

@code {
    public void GoToComponent(string name)
    {
        selectedType = Type.GetType($"Namespace.Pages.{name}");
    }
}

LandingComponent.razor

<p @onclick="() => OnClickFunction.InvokeAsync("First")">GO TO FIRST</p>
<p @onclick="() => OnClickFunction.InvokeAsync("Second")">GO TO SECOND</p>

@code {
    [Parameter] public EventCallback<string> OnClickFunction { get; set; }
}

FirstComponent.razor

<p @onclick="() => OnClickFunction.InvokeAsync("Landing")">GO TO LANDING</p>
<p @onclick="() => OnClickFunction.InvokeAsync("Second")">GO TO SECOND</p>

@code {
    [Parameter] public EventCallback<string> OnClickFunction { get; set; }
}

SecondComponent.razor

<p @onclick="() => OnClickFunction.InvokeAsync("First")">GO TO FIRST</p>
<p @onclick="() => OnClickFunction.InvokeAsync("Landing")">GO TO LANDING</p>

@code {
    [Parameter] public EventCallback<string> OnClickFunction { get; set; }
}

Answer 1

这是修改后的 Landing.razor。 First 和 Second 应该是相似的。

<p @onclick="() => OnClick(typeof(First))">GO TO FIRST</p>
<p @onclick="() => OnClick(typeof(Second))">GO TO SECOND</p>

@code {
    [Parameter] public EventCallback<Type> OnClickFunction { get; set; }

    private void OnClick(Type type)
    {
        OnClickFunction.InvokeAsync(type);
    }
}

和索引：

@page "/"
<DynamicComponent Type=this.selectedType Parameters=this.parameters/>

@code {
    private Type selectedType = typeof(Landing);

    private Dictionary<string, object> parameters => new Dictionary<string, object>()
    {
        { "OnClickFunction", EventCallback.Factory.Create<Type>(this, GoToComponent)}
    };

    public void GoToComponent(Type type)
    {
        this.selectedType = type;
        this.StateHasChanged();
    }
}