Блог

Главная - Вопросы по программированию - Как добавить компоненты Blazor в тело с помощью кода?

Как добавить компоненты Blazor в тело с помощью кода?

#blazor

Вопрос:

Я хотел бы сделать что-то подобное:

 private async Task buttonClick()
{
    var comp1 = new MyComp();
    comp1.Opt = new MyOpt { ... };        

    // add comp1 to body (or a div) here
    // in jQuery I would do $('#div1').append(comp1);
}

Комментарии:

1. Почему ты хочешь это сделать? Такие СПА-салоны, как Blazor и React, работают не так. Блейзор реагирует# более или менее. Вместо изменения DOM во время выполнения вы определяете компоненты, привязку данных и состояние и позволяете платформе SPA изменять только измененные элементы DOM

Ответ №1:

Blazor не поддерживает new MyComp(); , создание экземпляра остается на усмотрение визуализатора.

Это гораздо проще:

 @if(showComp1)
{
   <Component1 />
}

@code
{
  bool showComp;

  private void ButtonClick()
  {
    showComp = true;
  }

}

Ответ №2:

Вот MWE (Минимальный рабочий пример) для того, чего вы пытаетесь достичь.

Когда свойство обновляется в обработчике кнопок, компонент MWEIndex также обновляется, показывая MyComp.

страницы файлов/MyComp.razor

 <h1>MyComp</h1

страницы файлов/MWEIndex.razor

 @page "/mwe"

<button @onclick="buttonClick">Toggle MyComp</button>
<div>
@if(this.ShowMyComp)
{
  <MyComp />  
}
</div>

@code
{
  public bool ShowMyComp { get; set; } = false;

  private void buttonClick(MouseEventArgs e)
  {
    this.ShowMyComp = !this.ShowMyComp;
  }
}
Метки: