如何在 blazor 中将变量传递给组件的@typeparam

Question

我创建了一个TestComponent.razor

@typeparam TValue

@code {
    private TValue Type { get; set; }
    [Parameter] public string String { get; set; }
}

在 index.razor 页面中，我有以下内容：

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<ComponentFactory.Data.SampleComponent TValue="@myType" String="@myString"></ComponentFactory.Data.SampleComponent>

@code{
    Type myType { get; set; } = typeof(string);
    string myString { get; set; } = "hello";
}

我无法将 Type myType 传递到 TValue，除非我将 myType 设为当前页面的 @typeparam

为什么会这样，有没有办法将变量传递到组件的 @typeparam？

Answer 1

您不能使用“可变”泛型类型参数创建 Blazor 组件。就像 C# 中的普通泛型类型一样，这些类型参数需要在编译时知道，因此您必须在创建组件时直接指定您的类型。

在你的情况下，这可能是这样的：

<SampleComponent TValue="string" Type="some string" String="@myString" />

由于您已将泛型类型参数 TValue 用于属性 Type，您还可以显式省略 TValue="string" 并让编译器为你：

<SampleComponent Type="some string" String="@myString" />

如果您想动态创建一个组件，那么您可以做的是动态创建一个 RenderFragment 来呈现该组件。那样

在运行时创建具有动态类型参数的通用组件的唯一方法是使用反射。可以创建一个RenderFragment来动态创建一个组件：

<div>
   @SampleComponentInstance
</div>

@code{
    RenderFragment SampleComponentInstance => builder =>
    {
        var type = typeof(SampleComponent<>).MakeGenericType(new[] { MyType });
        builder.OpenComponent(1, type);
        builder.AddAttribute(2, "String", MyString);
        builder.CloseComponent();
    };

    Type MyType { get; set; } = typeof(string);
    string MyString { get; set; } = "hello";
}

这将在 div.

中呈现具有通用类型参数 MyType 的 SampleComponent

如何在 blazor 中将变量传递给组件的@typeparam

How to pass a variable into a component's @typeparam in blazor

c#

asp.net-core

blazor

blazor-server-side

.net-5