asp.net-core - 使用 TreeView 控件在选项卡内进行 Blazor 路由或导航

Question

我无法在 Blazor 中实现简单的路由，为了说明该场景，我有一个包含 Tab 控件的选项卡组件，并且在一个选项卡项中我有一个包含 TreeView 控件的 TreeView 组件。现在，当我尝试单击 TreeView 项目时，我会在 @Body 中显示与它相邻的特定项目的相关视图。一切看起来都是连线的，但是当我单击 TreeView 项目时，它会显示视图但同时给我一个错误。

错误：System.InvalidOperationException：“BlazorApp.Pages.TabComponent”类型的对象没有与名称“Body”匹配的属性。

• TabComponent (@page “/tab”) - 包含 Tab 控件
  • TreeViewComponent (@page “/tab/treeview”) - 包含 TreeView 控件和 @Body
    • @Body (@page "/tab/treeview/view1") 显示选中的TreeView item (View1) 组件

TabComponent.razor

@page "/tab"
@inherits ComponentBase

<BSTabGroup>
    <BSTabList>
        <BSTab>
            <BSTabLabel>TreeView</BSTabLabel>
            <BSTabContent>
                <TreeViewComponent></TreeViewComponent>
            </BSTabContent>
        </BSTab>
    </BSTabList>
    <BSTabSelectedContent></BSTabSelectedContent>
</BSTabGroup>

TreeViewComponent.razor

@page "/tab/treeview"
@layout TabComponent
@inherits LayoutComponentBase
<div class="container remove-margin">
    <div class="row">
        <div class="col-md-3">
            <TreeView Data="TreeDataSource" NodeSelected="@TreeNodeSelect"></TreeView>
        </div>
        <div class="col-md-9" style="height: 100%">
            <div class="card" style="height: 100%">
                <div class="card-header">
                    @Body
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    protected void TreeNodeSelect(object args)
    {
        NavigationManager.NavigateTo("/tab/treeview/view1");
    }
}

View1Component.razor

@page "/tab/treeview/view1"
@inherits ComponentBase
@layout TreeViewComponent

<h1>View 1</h1>

我不明白为什么在 TabComponent 级别有一个似乎不必要的 Body 会抱怨。

我怎样才能顺利完成这个简单的路由？

已编辑

Tab 控件来自 Radzen Blazor 库，但 TreeView 控件是我自己定制的。

标签： asp.net-coretreeviewblazortabcontrol