如何解决使用 TreeView 控件在 Tab 内进行 Blazor 路由或导航
我无法在 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 项 (View1) 组件
- TreeViewComponent (@page “/tab/treeview”) - 包含 TreeView 控件和 @Body
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 控件是我自己定制的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。