我想在按钮单击时动态调用 blazor 组件答案

【问题标题】：I want to call blazor component dynamically on button click我想在按钮单击时动态调用 blazor 组件
【发布时间】：2020-06-01 16:24:19
【问题描述】：

我有如下 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>

如何为按钮点击编写通用和动态的Show方法？

【问题讨论】：

不太清楚。我们不在 Blazor 中 Show() 组件，而是导航到页面。
您需要更准确地了解您正在努力解决的问题？
在点击处理程序中添加这个值："@(() => NavigationManger.NavigateTo("Comp"))": @onclick= "@(() => NavigationManger.NavigateTo(" Comp "))"
我不想导航，我想留在同一页面，但新组件在当前页面上以幻灯片的形式打开
@Gary，您必须导航到 comp 组件，除非您在 menu 组件中使用它。在这种情况下，您可以捕获对 comp 组件的引用，并在其上调用 Show 方法。

标签： asp.net-core blazor blazor-server-side blazor-client-side blazor-webassembly

【解决方案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;
}

我喜欢 Blazor！

【讨论】：