使用Razor将子组件注入父组件

Question

我正在尝试创建一个可以拖动的组件，我想在其中放置另一个组件。我不希望可拖动组件知道或关心它正在移动的组件的类型。我该如何实现？

这是父视图，我想在其中创建子组件

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<div>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

    @foreach (var comp in Componenets)
    {
        <BlazorApp1.Components.Component Data=@comp.DataStr ComponentModel="@comp"></BlazorApp1.Components.Component>
    }
</div>

@code {
    int currentCount = 0;
    [Parameter] public List<ComponentModel> Componenets { get; set; }

    protected override void OnInitialized()
    {
        Componenets = new List<ComponentModel>();
        Componenets.Add(new ComponentModel() { DataStr = "Woosi1", Colour="red", SubComponent = "SubComponent1"});<-- Indicate which sub-component should be used
        Componenets.Add(new ComponentModel() { DataStr = "Woosi2", Colour="blue" });
    }

    void IncrementCount()
    {
       Componenets.Add(new ComponentModel() { DataStr = "Button",StartPosX=0, StartPosY=0,Width="400px" });
    }
}

这是我要使用子组件的组件

<div draggable="true"
     @ondragend="OnDragEnd"
     @ondragstart="OnDragStart"
     style="border:dotted; background-color:@ComponentModel.Colour;
     width:@ComponentModel.Width; height:@ComponentModel.Height;
     left:@ComponentModel.StartPosX_px; top:@ComponentModel.StartPosY_px;
     position:absolute;">
    <p>Current count:</p>
    <p>@Data</p>

    -->Create component using arugments here: @ComponentModel.SubComponent <--

</div>

@code {

    [Parameter] public string Data { get; set; }
    [Parameter] public string PosX { get; set; }
    [Parameter] public string PosY { get; set; }
    [Parameter] public ComponentModel ComponentModel { get; set; }


    double startX, startY, offsetX, offsetY;

    void OnDragStart(MouseEventArgs args)
    {
        startX = args.ClientX;
        startY = args.ClientY;
    }

    void OnDragEnd(MouseEventArgs args)
    {
        offsetX += args.ClientX - startX;
        offsetY += args.ClientY - startY;

        ComponentModel.StartPosX = offsetX;
        ComponentModel.StartPosY = offsetY;
    }
}