Blazor - 如何获取布局@Body 路径？答案

【问题标题】：Blazor - How to get layout @Body path?Blazor - 如何获取布局@Body 路径？
【发布时间】：2021-07-22 17:14:20
【问题描述】：

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

问题：如何获取 @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 = ??????
    }
}

面包屑的型号：

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

【问题讨论】：

为什么在ParentURL 上启用可为空？字符串已经可以为空。
这很简单——因为我写的时候并没有意识到。当然这是正常工作（此时:)）

标签： c# blazor blazor-webassembly

【解决方案1】：

Blazor 为此提供了NavigationManager（请参阅Blazor routing）：

@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 中配置。

【讨论】：

谢谢。 NavigationManager 帮助 a.k.a. 做了我想做的事。只是对其他人要小心，“NavigationManager.Uri.Substring(Navigator.BaseUri.Length)”将返回不带“/”的路径，因此您将得到它而不是“/add/something/5”作为“add/something/ 5"，如果你比较，你可能会遇到一些小麻烦，直到弄清楚。
是的，我在我的示例中对此发表了评论。请记住接受您认为最能解决您的问题的答案！

【解决方案2】：

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

【讨论】：