是否可以通过传递给组件的参数调用 Blazor 组件？答案

【问题标题】：Is it possible to call a Blazor component through a parameter passed to a component?是否可以通过传递给组件的参数调用 Blazor 组件？
【发布时间】：2021-04-17 13:37:14
【问题描述】：

我希望能够将 Blazor 组件的名称发送到另一个组件并让它呈现。比如：

@page "/"
@using MyProject.Shared.Navigation

<ContentLeftNav UseNav="Navigation1">
Content
</ContentLeftNav>

其中 Navigation1.razor 是在 ContentLeftNav.razor 组件内某个位置呈现的组件。我看过一些文章，建议switch 在组件之间交替使用，但我想避免为所有可能的导航组件写出switch 语句。我想做的事有可能吗？

【问题讨论】：

可以直接使用渲染树，但是比较麻烦。您应该使用答案建议的模板

标签： blazor blazor-server-side

【解决方案1】：

我会这样做：

让您的 ContentLeftNav 组件指定多个渲染片段。例如：

<h3>ContentLeftNav</h3>
<div id="Content-left-body">
    @Content
</div>
<div id="Content-left-nav">
    @Navigation
</div>

@code {
    [Parameter] public RenderFragment Navigation { get; set; }
    [Parameter] public RenderFragment Content { get; set; }
}

然后像这样使用它：

<ContentLeftNav>
    <Navigation>
        @if (true)
        {
            <p>Some navigation content</p>
        }
        else
        {
            <p>Some other navigation content</p>
        }
    </Navigation>
    <Content>
        <p>Some other content</p>
    </Content>
</ContentLeftNav>

【讨论】：

【解决方案2】：

这是另一种选择。这不是很好，但它会起作用：

ContentLeftNav.razor

<nav>
   @RenerNav()
</nav>
<div>
   @ChildContent
</div>

@code {
   [Parameter] public Type NavComponent {get; set; }
   [Parameter] public RenderFragment ChildContent { get; set; }
    
    private RenderFragment RenderNav() => builder =>
    {
        builder.OpenComponent(0, ComponentToRender);
        builder.CloseComponent();
    };
}

Index.razor

@page "/"
@using MyProject.Shared.Navigation

<ContentLeftNav NavComponent="@typeof(Navigation1)">
Content
</ContentLeftNav>

在渲染ContentLeftNav 时，您可以发送任何组件的类型，ContentLeftNav 将渲染该组件的一个实例。

【讨论】：