在C# Blazor中,要創建動態組件,您可以使用ComponentBase
類和CascadingValue
、IChildComponent
接口。以下是一個簡單的示例,說明如何創建動態組件:
MyComponent.razor
:@code {
public string Message { get; set; }
}
DynamicComponentWrapper.razor
的組件:@inject ComponentBase DynamicComponent
<div>
<h3>Dynamic Component</h3>
<button @onclick="ToggleComponent">Toggle Component</button>
@if (showComponent)
{
@await DynamicComponent.RenderAsync()
}
</div>
@code {
private bool showComponent = false;
private async Task ToggleComponent()
{
showComponent = !showComponent;
await DynamicComponent.RenderAsync();
}
}
在這個例子中,我們使用@inject
指令將ComponentBase
類型的DynamicComponent
注入到DynamicComponentWrapper
組件中。我們還添加了一個按鈕,當點擊時,它會切換showComponent
布爾值,從而動態地顯示或隱藏動態組件。
DynamicComponentWrapper
組件,并傳入一個實現了IChildComponent
接口的動態組件。例如,在App.razor
中:@page "/dynamic-component"
@if (currentComponent == null)
{
currentComponent = new MyComponent { Message = "Hello from MyComponent!" };
}
<DynamicComponentWrapper DynamicComponent="currentComponent" />
@code {
private IChildComponent currentComponent;
}
在這個例子中,我們將MyComponent
實例賦值給currentComponent
變量,并將其傳遞給DynamicComponentWrapper
組件。當currentComponent
變量發生變化時,DynamicComponentWrapper
將自動重新渲染動態組件。
這就是在C# Blazor中創建動態組件的基本方法。您可以根據需要擴展此示例,以適應您的具體需求。