Как я рендеринг компонента блейзора динамически несколько раз мгновенно в другом компоненте (например, для каждого нажатия кнопки)

Question

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

Например: каждый раз, когда я нажимаю кнопку на компоненте 1, компонент 2 должен сразу добавляться в компонент 1.

Answer 1

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

Для этого вы можете использовать Шаблонные компоненты . Прочтите связанный раздел и попробуйте преобразовать мой образец в шаблонные компоненты.

ChildComponent.razor

<li><div>@Title</div></li>  

    @code {
      [Parameter]
      public string Title { get; set; } 
     }

ParentComponent.razor

    <p>Type the title for the new component and then click the button<p>

    <input type="text" @bind="@Title" />

   <button @onclick="@AddComponent">New Component</button>

    <div>   
     @if (!list.Any())
        {
            <p>You have no items in your list</p>
        }
        else
        {
            <ul>
                @foreach (var item in list)
                {
                    @item();
                }
            </ul>
        }
    </div>

    @code {

        public List<RenderFragment> list { get; set; }
        public string Title { get; set; }

        protected override void OnInitialized()
        {
           list = new List<RenderFragment>();
        }


        protected void AddComponent()
        {
                list.Add(CreateDynamicComponent());

        }


        RenderFragment CreateDynamicComponent() => builder =>
        {

            builder.OpenComponent(0, typeof(ChildComponent));
            builder.AddAttribute(1, "Title", "Title:  " + Title);
            builder.CloseComponent();

        };
    }

Надеюсь, это работает ...