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

Question

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

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

因此，问题变成了：有没有一种方法可以在子组件中获得页面的url参数，而该子组件不具有类似@page的属性？

我尝试过(但不限于(：

• https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0#路由参数
• 如何从MVC/Razor页面向顶级服务器端blazor组件传递参数

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

@page "/project/{name}"
<h3>Details </h3>
@code {
[Parameter] public string name { get; set; } = default!;
}

此页面不了解NavComponent，NavComponent通过布局托管，因此我无法将参数作为属性传递给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
}

限制答案：

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

Answer 1

为什么不级联这些值？

@page "/project/{name}"
<CascadingValue Name="ProjectName" Value="@name">
<h3>Details </h3>
<ProjectName/>
</CascadingValue>
@code {
[Parameter] public string name { get; set; } = string.Empty;
}

项目名称.razor

<h3>@ProjName</h3>
@code {
[CascadingParameter(Name ="ProjectName") ] public string? ProjName { get; set; }
}

Answer 2

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

公司.razor

@page "/company"
@page "/company/{ID}"
@code {
[Parameter]
public string ID { get; set; }
}

将此代码添加到主布局组件

@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组件。这就是你可以做到的：

向导航菜单组件添加组件参数属性，如下所示：

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

并将ID组件参数属性添加到NavMenu组件实例(位于MainLayout组件的顶部。现在应该是<NavMenu ID="@ID"/>