Блог

Главная - Вопросы по программированию - Создание / Видимость Встроенного Компонента Blazor, Привязанного К Компоненту

Создание / Видимость Встроенного Компонента Blazor, Привязанного К Компоненту

#c# #.net-core #blazor #blazor-server-side

Вопрос:

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

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

Я прочитал эту статью: https://www.thinktecture.com/en/blazor/blazor-components-lifecycle-is-not-always-straightforward/

Это подтвердило, что если видимость компонента скрыта на родительской странице, она не создается до тех пор, пока видимость не будет переключена. Например, такой код, как этот, на родительском:

 @if (isComponentVisible)
{
    <Component1 /> //Won't be created until visibility is toggled
}

Переключение isComponentVisible не только покажет компонент, но и запустит жизненный цикл и утилизацию компонента. Я хочу имитировать это поведение, не заключая все компоненты в @if блоки.

Я сделал тестовое репо на основе статьи, которая также исследует влияние жизненного цикла, перенося видимость компонента на сам компонент с помощью связанного параметра

Вызывающий компонент на родительской странице:

 <Component1 IsVisible="isComponentVisible"/> //Created immediately but invisible

@code {
    bool isComponentVisible = false;
}

Частичный код дочерней страницы:

 @* HTML portion of Blazor Page *@

@if (IsVisible)
{
    <h4>Component 4</h4>
}

@code {
    [Parameter]
    public bool IsVisible { get; set; }
    
   //Code continues with logging of various lifecycle stages
}

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

У меня есть тестовое репо, которое показывает это более подробно: https://github.com/aterbo-practice/BlazorComponentLifecycleTesting

Существует ли лучший способ управления созданием и удалением компонентов или в настоящее время рекомендуется заключать все компоненты в if блоки на родительской странице?

Метки: ,