实现接口的 Blazor 组件列表

Question

我正在为 Blazor 组件构建一个可重用的 Razor 类库。

我有一个任何 Blazor 组件都可以实现的接口：

public interface IControllableComponent
{
    void SetSomeValue(int someValue);
}

如何获得实现该接口的所有组件的列表？

public interface IControllableComponentManager
{
    void SetSomeValueForAllControllableComponents(int someValue);
}

public class ControllableComponentManager : IControllableComponentManager
{
    IList<IControllableComponent> _controllableComponentList;

    public ControllableComponentManager()
    {
        _controllableComponentList = ??? // how to populate this list?
    }

    public void SetSomeValueForAllControllableComponents(int someValue)
    {
        foreach (var controllableComponent in _controllableComponentList)
        {
            controllableComponent.SetSomeValue(someValue);
        }
    }
}

我希望我的可重用 Razor 类库在不同项目的代码中使用：

public class MyControllableComponentBase : ComponentBase, IControllableComponent
{
    protected int _someValue;

    public void SetSomeValue(int someValue)
    {
        _someValue = someValue;
    }
}

有没有办法在 ControllableComponentManager 中填充 _controllableComponentList？

我想以一种干净、适当的方式完成此操作，而不使用反射。最好采用带有依赖注入的 ASP.NET Core 风格。

问题是 Blazor 组件在 Razor 标记中被实例化为 <Component></Component>，所以我不知道如何获取它们的引用以将它们添加到 List<>。

Answer 1

我猜你可以这样做：

1. 定义一个存储接口类型集合的服务
2. 公开添加组件的方法、删除组件的方法、通知添加、删除等的事件委托。

3. 将服务注入到您想要将自身添加到服务的组件中，并在 OnInitialized 方法中执行以下操作：

   protected override void OnInitialized()
   {
       MyComponents.AddComponent(this);
       this.MyProperty = "I was born with the sun...";
   }  
   

Answer 2

您可以使用 @ref 获取 Blazor 组件引用，但您只能在 Razor 标记中执行此操作。

要在 Razor 标记之外使用对 Blazor 组件的引用，该组件必须自行注册。

为此，您必须在后面的代码中为组件使用分部类：

public partial class ComponentContainer : ComponentBase, IComponentContainer
{
    public Type ComponentType { get; protected set; }

    public RenderFragment Component { get; set; }

    [Parameter]
    public string Name { get; set; }

    [Inject]
    protected IComponentContainerManager ComponentContainerManager { get; set; }

    public void SetComponentType(Type componentType)
    {
        ComponentType = componentType;

        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        ComponentContainerManager.RegisterComponentContainer(Name, this);

        Component = builder =>
        {
            if (ComponentType != null)
            {
                builder.OpenComponent(0, ComponentType);
                builder.CloseComponent();
            }
        };
    }
}

使用[Inject]属性使用依赖注入注入组件可以注册的服务。

使用ComponentBase的protected override void OnInitialized()在注册服务中注册组件。

public interface IComponentContainer
{
    Type ComponentType { get; }
    void SetComponentType(Type componentType);
}

public interface IComponentContainerManager
{
    void RegisterComponentContainer(string componentContainerName, IComponentContainer componentContainer);
    void SetComponentType(string componentContainerName, Type componentType);
    Type GetComponentType(string componentContainerName);
}

public class ComponentContainerManager : IComponentContainerManager
{
    readonly IDictionary<string, IComponentContainer> _componentContainerDict = new Dictionary<string, IComponentContainer>();

    public void RegisterComponentContainer(string componentContainerName, IComponentContainer componentContainer)
    {
        _componentContainerDict[componentContainerName] = componentContainer;
    }

    public void SetComponentType(string componentContainerName, Type componentType)
    {
        _componentContainerDict[componentContainerName].SetComponentType(componentType);
    }

    public Type GetComponentType(string componentContainerName)
    {
        return _componentContainerDict[componentContainerName].ComponentType;
    }
}

现在您可以在代码中的任何位置使用IComponentContainerManager。

Answer 3

如果您想动态创建组件，那么您可以为此使用RenderFragment 概念。渲染片段本质上是一个使用RenderTreeBuilder 创建组件的函数。这是您在创作 .razor 文件时编译的 Razor 组件。

例如，以下代码创建了一个RenderFragment，它只呈现单个组件：

Type componentType = typeof(MyControllableComponentBase);
RenderFragment fragment = builder =>
{
    builder.OpenComponent(0, componentType);
    builder.CloseComponent();
};

然后您可以将该片段分配给一个属性并在您的 Razor 组件中动态呈现它：

<div>
   @Fragment
</div>

@code {
    public RenderFragment Fragment
    { get; set; }
}

这将解决当您只知道组件类型时如何动态创建组件的问题。但是，它不会解决您要在组件实例上调用SetSomeValue 的问题。为此，您必须了解您并不能真正控制组件实例：渲染树构建器负责从该虚拟标记创建组件，因此您永远不会调用new ComponentType()。相反，您依赖渲染器为您创建实例，然后您可以引用使用的实例并使用它。

您可以使用@ref 指令对capture references to rendered component instances：

<MyControllableComponent @ref="controllableComponent" />

@code {
    private MyControllableComponent controllableComponent;

    private void OnSomething()
    {
        controllableComponent.SetSomeValue(123);
    }
}