Blazorでコンポーネントを動的に追加・削除してみる

<div style="padding:1rem;margin:1rem;border: 1px solid gray;">
    <h3>コンポーネント</h3>
    <p>@Count</p>
</div>

@code {
    [Parameter]
    public int Count { get; set; }
}

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<!-- ここから -->
<div style="background-color:#EEE; margin-top:1rem;">

    <button @onclick="Add">追加</button>
    <button @onclick="Remove">削除</button>

    @foreach (var item in items)
    {
        <!-- 今回はここでコンポーネントを呼び出す -->
        <Component1 Count="@item" />
    }

</div>

@code {
    private List<int> items = new List<int>();

    private void Add()
    {
        // リストに要素を追加する
        items.Add(items.Count + 1);
    }

    private void Remove()
    {
        if (items.Count > 0)
        {
            // リストの最後の要素を削除する
            items.RemoveAt(items.Count - 1);
        }
    }
}
<!-- ここまで -->