在子组件中检索 Blazor 页面路由参数

Question

我正在尝试从子组件中检索页面的 URI 参数。

场景：我的布局包含一个导航菜单。在这些项目的链接中，我需要了解 URL 的部分内容，但 URL 链接到通过布局呈现的页面。

所以问题就变成了：有没有办法在子组件中获取页面的 url 参数，而该子组件不具有类似 @page 属性的东西？

我尝试过的（但不限于）：

https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0#route-parameters

所有这些解决方案都基于 URI 的自定义 interpretation/parsing。我觉得我已经在页面组件中完成了，不应该创建我自己的 URI 解析器：

@page "/project/{name}"

<h3>Details </h3>

@code {
    [Parameter] public string name { get; set; } = default!;
}

此页面不知道 NavComponent，NavComponent 是通过 Layout 托管的，因此我无法将参数作为属性传递给 NavComponent：

<MenuItem Title="Home" Icon="fa fa-home" Url="/@name/fun-page"/>  <-- name as retrieved in the page

<div>@technicalName</div>

@code {
    [Parameter] public string name { get; set; } <-- get from page hosting this component
}

限制答案：

我知道我可以自己解析 URI (NavigationManager)，但这不太好。
我知道我可以使用应用程序状态或会话状态并保存这些值，但这很快就会变得混乱，我担心它的复杂性。
理想情况下，我想触发与页面组件中发生的相同的逻辑来解析 URI，但在我的子组件中。

Answer 1

假设你已经创建了一个公司父组件，它可以获取一个路由参数来表示公司ID，其值用于检索可能显示在子组件中的公司详细信息。您可以这样定义父组件：

Company.razor

@page "/company"
@page "/company/{ID}"

@code {
    [Parameter]
    public string ID { get; set; }
}

将此代码添加到 MainLayout 组件

@code{

    public string ID { get; set; }

    protected override void OnParametersSet()
    {
        // pull out the "ID" parameter from the route data
        object id = null;
        if ((this.Body.Target as RouteView)?.RouteData.RouteValues?.TryGetValue("ID", out id) == true)
        {
            ID = id?.ToString();
        }
       
    }
}

注意：上述代码从RouteData中提取出ID参数的值，并存储在ID属性中。现在您可以随心所欲地使用它...包括在必要时将其传递给 NavMenu 组件。您可以这样做：

向 NavMenu 组件添加组件参数属性，如下所示：

[Parameter]
public string ID { get; set; }

并在NavMenu组件实例中添加一个ID组件参数属性（位于MainLayout组件的顶部，现在应该是<NavMenu ID="@ID"/>

Answer 2

为什么不直接级联这些值？

@page "/project/{name}"
<CascadingValue Name="ProjectName" Value="@name">
<h3>Details </h3>
<ProjectName/>
</CascadingValue>

@code {
    [Parameter] public string name { get; set; } = string.Empty;
}

ProjectName.razor

<h3>@ProjName</h3>

@code {

    [CascadingParameter(Name ="ProjectName") ] public string? ProjName { get; set; }

}

在子组件中检索 Blazor 页面路由参数

Retrieve Blazor page route parameters in child component

blazor

blazor-server-side

Company.razor