Blazor: Как отправить значение из одного компонента в другой?

Question

У меня есть MainLayout.razor с двумя компонентами: Header.razor и Content.razor . При выборе различных пунктов меню содержимое изменяется. При каждом изменении содержимого мне нужно отправить зависящее от содержимого значение в заголовок . Я пробовал разные методы с одинаковым результатом - значение в заголовке не обновляется. Есть ли что-то еще, что мне нужно сделать? Мой код: Заголовок.razor :

    <div>Content Name: @ContentName</div>
    @code {
        [Parameter]
        public string ContentName{ get; set; }
    }

Content.razor :

@code{
    [CascadingParameter]
    MainLayout Parent { get; set; }

    protected override void OnInitialized()
        {
            base.OnInitialized();
            ContentName = "Content 1";
            Parent.SetParameters(ContentName);
        }
}

MainLayout.razor :

@inherits LayoutComponentBase
@inject BlazorQART.Data.AppState AState
<div class="sidebar" >
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <Header ContentName="@_ContentName" />
    </div>
    <div class="content px-4">
        <CascadingValue Value="@this">
            @Body
        </CascadingValue>
    </div>
</div>
@code{
    private string _ContentName{ get; set; }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        AState.OnContentChange = OnContentChanged;
    }
    public void SetParameters (string content)
    {
        AState.ChangedContent = content;
    }
    protected async void OnContentChanged(string content)
    {
        await InvokeAsync(() =>
        {
            _ContentName = content;
        });
    }

AppState.cs :

    public class AppState
    {
        private string _ChangedContent;
        public Action<string> OnContentChange { get; set; }
        public string ChangedContent
        {
            get { return _ChangedContent; }
            set
            {
                _ChangedContent= value;
                OnContentChange.Invoke(_ChangedContent);
            }
        }
    }

Answer 1

Существует несколько подходов, которые можно использовать для решения этой проблемы, и я поделюсь парой из них.

Первый вариант - использовать внешний компонент для обработки состояния и передачи параметров для вашего контента, а также метод EventCallBack. В большинстве случаев движок Blazor должен принять изменения и выполнить повторную визуализацию самостоятельно.

Ссылка на документацию параметров компонентов MS

Ссылка на документацию обратного вызова событий MS

Второй вариант немного сложнее и включает использование внедренной службы в качестве контейнера состояний и концентратора событий и подписку на события из каждого компонента для сбора данных. Посмотрите ответ в этом посте , чтобы обсудить, как это можно сделать, и я бы порекомендовал окунуться в статью, рассказывающую о временах жизни Blazor DI, и убедиться, что вы понимаете их, но как только вы это сделаете, вы можете настроить службу Scoped или Transient для поддержки только той страницы, на которой вы находитесь. Эта опция обсуждает обновление компонентов через соединения, но использование службы одинаковым образом работает и с разными компонентами на одной странице. Это может быть излишним для вашей ситуации, но это хороший инструмент, чтобы иметь в своем ящике.

Краткая заметка и о каскадных параметрах: я вижу, что у вас есть один из перечисленных выше, и эта функция имеет свои применения, но она также связывает любые компоненты, которые захватывают свойство [CascadingParameter], с компонентом, который предоставляет параметр, поскольку некоторые функциональные возможности вашего компонента будут зависеть от этого каскадного параметра. Если у вас есть только отношения 1 родитель -> 1 ребенок, я бы использовал [Parameter] и EventCallBack, что сделает ваш дочерний компонент гораздо более переносимым и пригодным для повторного использования. Однако, если вам нужно передать значение через несколько уровней дочерних компонентов, у вас может быть хороший случай для каскадного значения. Вам придется взвесить все за и против каждого подхода, но я рекомендую подумать над этим.