Razor 组件接口答案

【问题标题】：Razor Component interfacesRazor 组件接口
【发布时间】：2021-11-17 20:25:56
【问题描述】：

是否可以定义和实现剃须刀组件接口？

我想我会为组件设想如下内容（我知道这不是有效代码）

IWelcomeComponent.razor

@code
{
  [Parameter]
  public string Name;
}

WelcomeComponentA.razor

@implements IWelcomeComponent

<div>
  Hello @Name!
</div>
@code
{
  [Parameter]
  public string Name;
}

WelcomeComponentB.razor

@implements IWelcomeComponent

<div>
  Welcome @Name!
</div>
@code
{
  [Parameter]
  public string Name;
}

我为什么会喜欢这个？每次安装显示更改。理想情况下，我希望能够通过配置定义使用哪种类型的组件，类似于我在定义要使用的IEmailService 时这样做。

switch (configuration.GetValue<string>("EmailProvider"))
{
    case "Mock":
        services.AddScoped<IEmailService, MockEmailService>();
        break;
    case "Smtp":
        services.AddScoped<IEmailService, SmtpEmailService>();
        services.Configure<SmtpConfiguration>(configuration.GetSection("SmtpConfiguration"));
        break;
    default:
        throw new Exception("appsettings.json EmailProvider must be set. Use 'Mock' to send emails to console log");
}

所以如果我想实现WelcomeComponentB 我会有一些东西可以让我说“嘿，当我说 IWelcomeComponent 我希望你显示 WelcomeComponentB”时，我再次意识到这不是完全正确的，而是类似的。 ..

services.AddScoped<IWelcomeComponent, WelcomeComponentB>();

然后在我的剃须刀页面中，每个IWelcomeComponent 都会呈现为WelcomeComponentB

例如

<IWelcomeComponent Name="Chris"/>

将呈现为

<div>
  Welcome Chris!
</div>

有什么想法吗？谢谢。

【问题讨论】：

您可以使用 RenderTreeBuilder 动态构建 RenderFragments...
如果你定义了一个持有参数的类。您可以为每个类型创建一个 RenderFragment，其中 T 是参数类。然后，您通过相同的参数调用您选择的 Renderfragment。记住渲染片段是被委托人..

标签： c# razor blazor .net-5

【解决方案1】：

您可以从 ComponentBase 扩展组件 blazor 组件继承。此外，它还可以实现接口
如果您想要真正的动态类型驱动组件多态性，请查看新的实验性DynamicComponent。 https://docs.microsoft.com/en-us/aspnet/core/blazor/components/dynamiccomponent?view=aspnetcore-6.0

但是，我不确定注入 blazor 组件的想法是否有效。不能将 Blazor 组件作为服务注入。

【讨论】：

【解决方案2】：

不确定您是否在搜索类似的内容，但我在与您描述的类似情况下使用它

@CreateComponent();

@code {

    private RenderFragment CreateComponent() => builder =>
    {   
        builder.OpenElement(0, "p", implementedBySomething.YourString);
        builder.ElementClose();    
    };
}

这样你可以在运行时渲染所有东西

【讨论】：