DynamicComponent将子从子发送给父母

Question

我有一个代表用于创建dynamicComponent的必要数据：

public class ComponentMetadata
{
    public string? Name { get; set; }
    public Dictionary<string, object> Parameters { get; set; } = 
        new Dictionary<string, object>();
}

我有一个自定义表组件，它使用componentsmetadata将一些动态组件添加到表：

tabletemplate .RAZOR：

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var RowTemplateConfig in RowTemplateConfigs)
        {
            if (RowTemplateConfig.DataItem is not null)
            {
                <tr>
                  <td> @RowTemplateConfig.DataItem </td>
                 
                 @if(RowTemplateConfig.ComponentMetadata is not null)
                 {
                  <td>
                    <DynamicComponent
                     Type= RowTemplateConfig.ComponentMetadata.Name
                     Parameters= RowTemplateConfig.ComponentMetadata.Parameters />
                  </td>
                 }
               </tr>
           }
       }
    </tbody>
</table>

@code {
    public class RowTemplateConfig 
    {
      public ComponentMetadata ComponentMetadata { get; set;}
      public string DataItem { get; set; }
    }
    [Parameter]
    public RenderFragment? TableHeader { get; set; }

    [Parameter]
    public List<RowTemplateConfig> RowTemplateConfigs {get; set;}
}

我还有其他自定义组件，例如按钮自定义组件：

mybutton.razor

<button type="button"
        class="@Style"
        @onclick="BtnClick">
@Text
</button>

@code {
 [Parameter]
 public string Style { get; set; }
 [Parameter]
 public string Text { get; set; }
 [Parameter]
 public EventCallback<object> OnBtnClick { get; set; }

 private async Task BtnClick(object item) 
 {
  await OnBtnClick.InvokeAsync(item);
 }
}

我想使用我的tabletemplate.razor在某些剃须刀页面中：

pets1.razor

@page "/pets1"

<h1>Pets</h1>

<TableTemplate RowTemplateConfigs =RowTemplateConfigs  TItem =string>
    <TableHeader>
        <th>Name</th>
    </TableHeader>
</TableTemplate>

@code {
    private List<RowTemplateConfig> RowTemplateConfigs = new()
    {
        RowTemplateConfig = new () 
        {
          DataItem = "Bigglesworth",
          ComponentMetadata = new()
          {
           Name= typeof(MyButton).
           Parameters = new Dictionary<string, object>()
           {
            { nameof(MyButton.Style), "btn btn-outline-success" }
            { nameof(MyButton.OnBtnClick),  EventCallback.Factory.Create<object>(this, OnTestClick)},
            { nameof(MyButton.Text), "Hi"}
           }
          }
        },
        RowTemplateConfig = new () 
        {
          DataItem = "Saberhagen",
          ComponentMetadata = new()
          {
           Name= typeof(MyButton).
           Parameters = new Dictionary<string, object>()
           {
            { nameof(MyButton.Style), "btn btn-outline-success" }
            { nameof(MyButton.OnBtnClick),  EventCallback.Factory.Create<object>(this, OnTestClick)},
            { nameof(MyButton.Text), "Hi"}
           }
          }
        },
       //rest of the lest ...
    }

 private async Task OnTestClick(object sender)
 {
  // I want to catch the name of the pet here when user click on the button
   await Task.Delay(20);
 }
}

我的问题：

当用户单击mybutton intabletemplate in pets1.razor我想在事件ontestClick中捕获元素（PET的名称）。

谢谢，很抱歉长期以来的问题，感谢任何建议。

Answer 1

您需要将PET名称参数添加到按钮组件，加载它，然后在回调事件中提交属性。

这是您的代码的修改版本（带有一些错别字和类型修复程序）。 注意：i用无效的启用代码。

componentMetadata

public class ComponentMetadata
{
    public Type Name { get; set; } = default!;
    public Dictionary<string, object> Parameters { get; set; } =
        new Dictionary<string, object>();
}

mybutton.razor

<button type="button" class="@Style" @onclick=BtnClick>
@Text
</button>

@code {
 [Parameter] public string? Style { get; set; }
 [Parameter] public string? Name { get; set; }
 [Parameter] public string? Text { get; set; }
 [Parameter] public EventCallback<string> OnBtnClick { get; set; }

 private async Task BtnClick() 
    =>  await OnBtnClick.InvokeAsync(this.Name);
}

，然后代码的其余部分汇入了我的测试页面：

@page "/"

@foreach (var component in myDynamicComponents)
{
    <DynamicComponent Type="@component.ComponentMetadata.Name" Parameters=component.ComponentMetadata.Parameters />
}

<div class="p-2 m-2">
    <strong>Message:</strong> @message
</div>
@code {
    private string message = string.Empty;

    private RowTemplateConfig GetRowTemplate(string petName)
        => new RowTemplateConfig
            {
                DataItem = petName,
                ComponentMetadata =
                new ComponentMetadata()
                {
                    Name = typeof(MyButton),
                    Parameters = new Dictionary<string, object>()
                       {
                    { nameof(MyButton.Style), "btn btn-outline-success ms-1" },
                    { nameof(MyButton.Name), petName },
                    { nameof(MyButton.OnBtnClick),  EventCallback.Factory.Create<string>(this, OnTestClick)},
                    { nameof(MyButton.Text), $"Hi {petName}"}
                       }
                }
            };

    private List<RowTemplateConfig> myDynamicComponents => new List<RowTemplateConfig> {
            GetRowTemplate("Ginger"),
            GetRowTemplate("Tiger"),
            GetRowTemplate("Felix")
        };

    private async Task OnTestClick(string name)
    {
        await Task.Delay(20);
        message = $"{name} Clicked at {DateTime.Now.ToLongTimeString()}";
    }

    public class RowTemplateConfig
    {
        public ComponentMetadata ComponentMetadata { get; set; } = default!;
        public string? DataItem { get; set; }
    }

}