如何通過單擊按鈕動態生成 Blazor 組件？

Question

我正在使用 Blazor 服務器。 我有一個ButtonComponent ，它顯示一個按鈕，用戶可以通過模態 window 將 label 作為參數傳遞，然后單擊Ok 。 一旦用戶點擊Ok ，輸入的 label 就會顯示在按鈕上。

當用戶一次單擊一個顯示按鈕時，如何垂直顯示多個組件（ ButtonComponent ）？

@page "/tester"

<button type="button" @onclick="() => showSignUpComponent = true">
    Show Button
</button>

@if (showSignUpComponent)
{
    <ButtonComponent label="Search" /> <hr/>
}

@code {
    bool showSignUpComponent;
}

Answer 1

與其考慮控件的 collections，不如考慮需要在標記中表達的對象Lists 。 因此，如果您有一組需要按鈕的 Label 字符串，您可以執行以下操作：

@page "/btn"

<input @bind="newLabel" />

<button type="button" @onclick="() => Labels.Add(newLabel) ">
    Spawn
</button>

@foreach (var label in Labels)
{
    @*<ButtonComponent label="@label" />*@
    <div>This would be a button with label "@label".</div>
}


@code {
    string newLabel { get; set; } = "";

    List<string> Labels = new List<string>();
}

您可以列出您想要的任何 class，並根據需要交換控件。