Blazor - доступ к глобальным переменным из компонента макета

Question

Мне нужна помощь в разработке архитектуры приложения Blazor для достижения того, что мне нужно.

Все страницы этого приложения должны иметь одинаковый начальный параметр, скажем AccountId. Таким образом, страница продукта может выглядеть как «/ product / {AccountId}», страница клиента может выглядеть как «/ customer / {AccountId}». Это значение AccountId используется для получения базовой c информации об учетной записи, такой как имя, телефон.

Сайт использует глобальные навигационные панели, вот как выглядит 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, от которого все они наследуются, и попытался извлечь информацию об учетной записи в OnInitializedAsyn c () BasePage и установить защищенную переменную. Однако компонент TopNav не получает это значение и всегда видит его как ноль.

Как мне структурировать свое приложение так, чтобы как отдельный компонент страницы, так и весь компонент макета получали один и тот же объект информации учетной записи?

Большое спасибо!

Answer 1

Предположим, вы создали родительский компонент Company, который может получить параметр маршрута для представления идентификатора компании, значение которого используется для получения сведений о компании, которые могут отображаться в дочернем компоненте. Вы можете определить родительский компонент следующим образом:

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();
        }

    }
}

Примечание. Приведенный выше код извлекает значение параметра ID из RouteData и сохраняет его в свойстве ID. Теперь вы можете делать с ним все, что захотите ... включая передачу его компоненту NavMenu, если это необходимо. Вот как это можно сделать:

Добавьте свойство параметра компонента в компонент NavMenu, например:

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

И добавьте атрибут параметра компонента ID в экземпляр компонента NavMenu (расположен в верхней части компонента MainLayout. Теперь он должен быть <NavMenu ID="@ID"/>

Примечание. В этом примере кода описывается, как можно вывести идентификатор параметра (AccountID и т. д. c.) из MainLayout и как его передать. к его дочернему компоненту, NavMenu (TopNav, LeftNav). Теперь, когда у вас есть идентификатор, вы можете передать его в любое хранилище данных, которое вы определили, и получить некоторые данные ...

Надеюсь, что это помогает ...

Answer 2

1. Создание службы получения и настройки текущей учетной записи.
2. Привязать NavBar к этому сервису свойства текущей учетной записи