时间戳

首页 > 解决方案 > Blazor - 动态调用组件（按字符串）

blazor - Blazor - 动态调用组件（按字符串）

问题描述

有没有一种优雅的方法可以通过名称作为字符串动态调用 blazor 组件。

而不是使用：

<User />

我想像在 Vue 框架中一样调用它：

<component :is="User" />

我找到了一个解决方案，但它不是很优雅：

@dynamicComponent("App.Pages.User")

@code {

    RenderFragment dynamicComponent(string name) => builder =>
    {
        Type type = Type.GetType(name);
        builder.OpenComponent(0, type);

        builder.CloseComponent();
    };
}

有任何想法吗？

标签： blazor

解决方案

我认为，例如，假设我们已经定义了三个组件，

  1. TabParent.razor
  2. Tab.razor
  3. TabContent.razor

以下是它们的用法：

<TabParent CurrentTab="@currentTabName">
  <Tab @OnClick="@(() => swapTab("tab1"))">Tab 1</Tab>
  <Tab @OnClick="@(() => swapTab("tab2"))">Tab 2</Tab>

  <TabContent Name="tab1">
    Any other Components here
  </TabContent>

  <TabContent Name="tab2">
    Any other Components here
  </TabContent>
</TabParent>

@code {
  string currentTabName;

  void swapTab(string tabName)
  {
    currentTabName = tabName;
  }
}

这是TabParent组件：

<div>
  <CascadingValue Name="CurrentTab" Value="@CurrentTab">
    @ChildContent
  </CascadingValue>
</div>

@code {
  [Parameter]
  public string CurrentTab { get; set; }

  [Parameter]
  public RenderFragment ChildContent { get; set; }
}

这是TabChild组件：

@if(CurrentTab == TabName) // <-- this way the component won't render unless it is the current tab
{
  <div class="tab-content">
    @ChildContent
  </div>
}

@code {
  [CascadingParameter(Name="CurrentTab")]
  public string CurrentTab { get; set; }

  [Parameter]
  public string TabName { get; set; }

  [Parameter]
  public RenderFragment ChildContent { get; set; }
}

推荐阅读