Blazor - 如何获得布局@Body 路径？

Question

我正在解决面包屑导航和动态显示的问题（我想避免在每个 razor 组件（页面之一）static 数据中都有。谢谢转发。

问题：如何获取@Body组件的路径？ 在正文中当然是（项目中的默认文件夹名称）页面之一。 所以“body本身”的第1行是@page“/somePage”...

我的（缩短的）布局：

<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：

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;
        }
    }

面包屑组件（布局中的那个）

<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; }
}

Answer 1

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.
}

---

一些注意事项/建议：

• 由于可以注入NavigationManager ，因此您无需将其作为参数传递给BreadCrumbs组件（除非您将该组件用于 URL 路径以外的其他内容）。 你可以直接将它注入到你的BreadCrumbs组件中：

@inject NavigationManager NavigationManager;

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">

• @Body不是一个组件：它是一个RenderFragment 。
• @Body本身没有路径； 页面（用@page指定）做。 路由由App.razor管理并在Startup.cs中配置。

Answer 2

您可以通过注入NavigationManager从NavigationManager.Uri属性获取当前页面 URI。 从中，您可以提取数据。