[英]Blazor - How to get layout @Body path?
I am solving problem with breadcrumb navigation and dynamic showing (I want to avoid have in every razor component (one of Pages) static data. Thank you in forward.我正在解决面包屑导航和动态显示的问题(我想避免在每个 razor 组件(页面之一)static 数据中都有。谢谢转发。
Problem: how to get path of the @Body component?问题:如何获取@Body组件的路径? In the body is of course the one of (default folder name in project) Pages.在正文中当然是(项目中的默认文件夹名称)页面之一。 So line 1 of "body itself" is @page "/somePage"...所以“body本身”的第1行是@page“/somePage”...
My (shortened) layout:我的(缩短的)布局:
<div class="page">
<div class="main">
<div class="top-row TitleButtonList @((closedLeftBar) ? "TitleButtonListClose" : "") ">
<TitleButton />
</div>
<div class="top-row">
<BreadcrumbNav breadCrumbData="breadCrumbDatas"></BreadcrumbNav>
<p>Error test name: @path</p>
</div>
<div class="content px-4 @((closedLeftBar) ? "contentClose col-md-10" : "contentOpen col-md-9")">
@Body
<FOLButtons />
</div>
</div>
</div>
@code {
public List<BreadCrumbData> breadCrumbDatas;
string path = string.Empty;
protected override void OnInitialized()
{
breadCrumbDatas = breadCrumbService.GetProperList();
path = ??????
}
}
Model of BreadCrumb:面包屑的 Model:
public class BreadCrumbData
{
[Required]
public string Text { get; set; }
[Required]
public string URL { get; set; }
[Required]
public int Level { get; set; }
[Required]
#nullable enable
public string? ParentURL { get; set; }
public BreadCrumbData(string text, string url, int level, string parentURL)
{
Text = text;
URL = url;
Level = level;
ParentURL = parentURL;
}
}
Breadcrumb component (that one what is in layout)面包屑组件(布局中的那个)
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
@if (breadCrumbData != null)
{
@foreach (var item in breadCrumbData)
{
@if (item == breadCrumbData.Last())
{
<li class="breadcrumb-item active" aria-current="page">@item.Text</li>
}
else
{
<li class="breadcrumb-item"><a href="@item.URL">@item.Text</a></li>
}
}
}
</ol>
</nav>
@code {
[Parameter]
public List<BreadCrumbData> breadCrumbData { get; set; }
}
Blazor provides the NavigationManager
for this purpose (see Blazor routing ): Blazor 为此提供了NavigationManager
(请参阅Blazor 路由):
@inject NavigationManager NavigationManager;
protected override void OnInitialized()
{
breadCrumbDatas = breadCrumbService.GetProperList();
// Get everything after the domain + '/' (e.g. after "https://example.com/")
path = NavigationManager.Uri.Substring(Navigator.BaseUri.Length);
// You can also listen for a path change by subscribing to
// NavigationManager.LocationChanged.
}
A couple notes/suggestions:一些注意事项/建议:
NavigationManager
can be injected, you don't need to pass it down to your BreadCrumbs
component as a parameter (unless you are using the component for something other than URL paths).由于可以注入NavigationManager
,因此您无需将其作为参数传递给BreadCrumbs
组件(除非您将该组件用于 URL 路径以外的其他内容)。 You can directly inject it into your BreadCrumbs
component:你可以直接将它注入到你的BreadCrumbs
组件中:@inject NavigationManager NavigationManager;
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
@Body
isn't a component: it is a RenderFragment
. @Body
不是一个组件:它是一个RenderFragment
。@Body
doesn't have a path, per se; @Body
本身没有路径; pages (designated with @page
) do.页面(用@page
指定)做。 Routing is managed by App.razor and configured in Startup.cs .路由由App.razor管理并在Startup.cs中配置。 You can get the current page URI from the NavigationManager.Uri
property, by injecting NavigationManager
.您可以通过注入NavigationManager
从NavigationManager.Uri
属性获取当前页面 URI。 From that, you can extract your data.从中,您可以提取数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.