asp.net-core - 我想在按钮单击时动态调用 blazor 组件

Question

我有 TemplateSlide.razor 组件，如下所示

<div class="slide-panel">
  <div class="contact-form-content">
          @Content

 </div>
@code
{
[Parameter] public RenderFragment Content { get; set; }
}

我有剃须刀组件 Comp.razor 如下

<TemplateSlide>
<div>Other comp</div>
</TemplateSlide>

我有其他菜单组件在单击按钮时调用 Comp.razor

 <div class="page-header-buttons">
        <ul>

            <li class="page-header-buttons-items can-add">
                <MainMenuLink Href="" ActiveClass="page-header-active" HrefMatch="MainMenuLinkMatch.Exact">
                    Dashboard
                </MainMenuLink>

                @*<a class="page-header-plus contact" href="#"><i class="fas fa-plus add-new-contact-icon"></i></a>*@
            </li>
            <li class="page-header-buttons-items can-add">
                <MainMenuLink Href="contacts" ActiveClass="page-header-active">
                    Contacts
                </MainMenuLink>
                <a class="page-header-plus contact"   @onclick="@(()=>Show<Comp>())"><i class="fas fa-plus add-new-contact-icon"></i></a>

            </li>
<li class="page-header-buttons-items can-add">
                <MainMenuLink Href="contacts" ActiveClass="page-header-active">
                    Others
                </MainMenuLink>
                <a class="page-header-plus contact"   @onclick="@(()=>Show<Others>())"><i class="fas fa-plus add-new-contact-icon"></i></a>

            </li>
</ul>
    </div>

如何为按钮单击编写通用和动态显示方法？

Answer 1

我昨天学到了这个，我只发布这个以防它对某人有帮助。

我在我的 Blazor 聊天中显示了一个用户列表，名称实际上是按钮：

@foreach (SubscriberCallback callback in Names)
{
    <button class="listbutton" @onclick="(Action<EventArgs>) (args => 
    SendPrivateMessageClicked(args, callback.Id))">@callback.Name</button><br />
}

我有一个名为 SendPrivateMessageClicked 的方法，我需要传入要向谁发送消息的 Id (Guid)。

private void SendPrivateMessageClicked(EventArgs args, Guid toId)
{
    // Attempt to find the subscriber
    SubscriberCallback subscriber = SubscriberService.FindSubscriber(toId);

    // Send Private Message Code Removed, but you get the point
}

链接按钮的CSS：

.listbutton
{
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
    border: none;
    color: limegreen;
    height: 2.4vh;
    font-size: 2vh;
}
.listbutton:focus
{
    outline: none;
}

我爱布雷泽！