Question

有没有一种优雅的方法可以通过将其名称作为字符串动态调用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();
    };
}

有什么想法吗？

Answer 1

例如，我想我们已经定义了三个组成部分，

TabParent.razor
Tab.razor
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; }
}

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

1 个答案: