Внедрить дочерний компонент в родительский компонент с помощью Razor - PullRequest
Новая
       7

Внедрить дочерний компонент в родительский компонент с помощью Razor

0 голосов
/ 06 октября 2019

Я пытаюсь создать компонент, который можно перетаскивать, и хочу разместить внутри него другой компонент. Я не хочу, чтобы перетаскиваемый компонент знал или заботился о том, какой тип компонента он перемещает. Как я могу добиться этого?

Вот родительское представление, где я хочу создать свой подкомпонент 

@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;
    }
}
...