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。 從中，您可以提取數據。