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

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 组件不会接收到这个值，并且总是将其视为 null。

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

非常感谢！

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 组件添加一个组件参数属性，如下所示：

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

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

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

希望这会有所帮助...

Answer 2

1. 创建一个获取和设置当前帐户的服务。
2. 在此服务当前帐户属性上绑定 NavBar