Опубликовать список данных из компонента в новый компонент и отобразить новый компонент в Blazor

Вы можете попробовать обернуть оба компонента во внешний компонент, а затем использовать внешний в качестве контейнера состояния.

Контейнер

<div>

    <ComponentA @ref="_componentA" ListItems="ListA"/>

    <ComponentB @ref="_componentb" ListItems="ListB"/>

</div>

@code {

    Public List<T> ListA { get; set; }
    Public List<T> ListB => ListA.Where(x => x.IsSelected).ToList();

    ComponentA _componentA;
    ComponentB _componentB;
}

Теперь у вас есть списки, отделенные от деталей рендеринга, а ListB просто является производным от ListA и дает вам список, отфильтрованный по логическому значению, которое вам необходимо настроить. Чтобы проблемы оставались в нужных местах, все функции списка (списков) также должны находиться в компоненте Контейнер. У вас также есть ссылки на 2 компонента, настроенных, чтобы вы могли воздействовать на их общедоступные методы извне.

Чтобы получить доступ к компонентам, настройте их с помощью свойства IsVisible и начального значения, а также методов для отображения и скрытия, а также свойства EventCallBack, чтобы вызывающий код мог устанавливать методы. Вам также понадобится элемент управления (кнопка?) Для обратного вызова.

Компонент А

<div style="display: @(IsVisible ? "flex" : "none")">

    @foreach (var item in Items)
    {
       //Do something awesome
    }

    <button @onclick="@(() => ToggleToB.InvokeAsync())">Toggle to Component B</button> 

</div>

@code {

    [Parameter]
    public List<T> Items { get; set; }

    [Parameter]
    public EventCallBack ToggleToB { get; set; }

    private bool IsVisible { get; set } = true

    public void Show()
    {
        IsVisible = true;
    }

    public void Hide()
    {
        IsVisible = false;
    }

... other component details
}

Компонент B будет иметь такую ​​же настройку, но начальное значение IsVisible будет false, поскольку вы не хотите его видеть изначально.

Теперь вы можете настроить методы из Container, которые действуют на методы компонентов, чтобы ваш контейнер выглядел, как показано ниже. Обратите внимание на методы обратного вызова в тегах <Component>:

Контейнер обновлен

<div>

    <ComponentA @ref="_componentA" ListItems="ListA" ToggleToB="@ShowComponentB"/>

    <ComponentB @ref="_componentb" ListItems="ListB" ToggleToA="@ShowComponentA"/>

</div>

@code {

    Public List<T> ListA { get; set; }
    Public List<T> ListB => ListA.Where(x => x.IsSelected).ToList();

    public ComponentA _componentA;
    ComponentB _componentB;

    public void ShowComponentA()
    {
        _componentA.Show();
        _componentB.Hide();
    }

    public void ShowComponentB()
    {
        _componentB.Show();
        _componentA.Hide();
    }

    public void ListBConfirmed()
    {
        // Do whatever you do once you go through Component B
        ShowComponentA();
    }
}

Наконец, помните, что ни для компонента A, ни для B не требуется перечисление @page, вместо этого сделайте это в Container для вашей маршрутизации, поскольку каждый компонент в контейнере теперь предназначен для упаковки в контейнер для захвата ссылки и получения ее списка.

Вот и все, теперь у вас есть Компоненты A и B для визуализации списков из другого источника и все необходимое для работы с методами из внешнего источника для обновления списков по мере необходимости. Просто добавьте дополнительные EventCallBack параметров по мере необходимости, и если у вас есть параметры для передачи в методы контейнера, не забудьте использовать EventCallBack<T>.

Вы можете сделать это различными способами в зависимости от того, являются ли ComponentA и ComponentB маршрутизируемыми компонентами или нет.

Если ComponentB является дочерним компонентом ComponentA; то есть ComponentB, который не маршрутизируется, встроен в ComponentA, вы можете передавать значения из ComponentA в ComponentB в качестве параметров компонента ... Следующий фрагмент кода создает родительский компонент и дочерний компонент и демонстрирует, как передавать значения из родительский компонент к дочернему компоненту:

Родитель. Бритва

@page "/parent"

<Child Age="age" Country="country" /> 

@code
{
 private int age = 21;
 private string country = "Thailand";
} 

Child.razor

@ No @page directive here as the child component is not routable @
<p>Country: @Country</p>

@code
{
 [Parameter]
 Public int Age {get; set;} 

 [Parameter]
 Public string Country {get; set;} 
} 

Как видите, мы передаем значения возраста и страны из родительского компонента в его дочерний компонент. В реальном коде вы можете передавать коллекции объектов, выполнять различные манипуляции и т. Д. Выше приведены основные схемы того, как родитель может общаться со своим дочерним элементом и передавать ему значения. Наоборот, то есть передача значений от дочернего компонента к его родительскому осуществляется через делегаты событий.

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

Предположим, вы хотите перенаправить своего пользователя с текущей страницы, скажем, ComponentA, где он заполнил форму с большим количеством элементов данных, на ComponentB, который получает данные, обрабатывает их и т. Д. Вот код, как перейти от ComponentA к Navigate в ComponentB:

<button type="button" @onclick="ShowList">Show list of women</button>

@code
{
   private void ShowList()
  {
      NavigateManager.NavigateTo("/ComponentB");
  }
}

Как видите, приведенный выше код перенаправляет пользователя с одной страницы на другую, но как передать данные? Для этого вам необходимо определить класс обслуживания, который можно внедрить в оба компонента для выполнения передачи данных от одного к другому. следующая ссылка - это мой ответ, в котором я подробно рассказываю об этом механизме.

Надеюсь это поможет...