Question

我需要一些有关如何构建Blazor应用程序以实现所需功能的帮助。

此应用程序的所有页面必须具有相同的起始参数，例如AccountId。因此，产品页面可能类似于“ / product / {AccountId}”，客户页面可能类似于“ / customer / {AccountId}”。此AccountId值用于检索基本的帐户信息，例如姓名，电话。

该站点共享全局导航栏，这是MainLayout的样子：

<TopNav></TopNav>
<LeftNav></LeftNav>
<main class="app-main">
<div class="wrapper">
    <div class="page">
        <div class="page-inner">
            @Body
        </div>
    </div>
</div>

我需要在TopNav布局组件中显示帐户名称。我尝试创建它们都继承的BasePage类，并尝试在BasePage的OnInitializedAsync（）中获取帐户信息并设置一个受保护的变量。但是，TopNav组件不会收到该值，并且始终将其视为空。

我应该如何构造我的应用程序，以便单个页面组件和所有布局组件都可以接收到相同的帐户信息对象？

非常感谢！

Answer 1

假设您已经创建了Company父组件，该组件可以获取代表公司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组件添加一个Component Parameter属性，如下所示：

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

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

注意：此代码示例描述如何在MainLayout中提取参数ID（AccountID等），以及如何将其传递给其子组件NavMenu（TopNav，LeftNav）。现在，您已经获得了ID，您可以将其传递到您定义的任何数据存储中，并检索一些数据详细信息...

希望这对您有帮助...

Answer 2

创建用于获取和设置当前帐户的服务。
在该服务的当前帐户属性上绑定导航栏

Blazor-从布局组件访问全局变量

2 个答案:

Company.razor