Blazor-如何删除子组件

Question

背景

我有一个带有多个按钮的组件MainComponent，它将显示一个新的SubComponent(<TaskList AreaId="@SelectedAreaId" IsVisible="@IsVisible"></TaskList>)。

问题

当我想在SubComponent上放一个关闭按钮时，问题就出现了：我试着在上面创建一个按钮，并制作：IsVisible = !IsVisible。虽然这在一定程度上起作用(它使组件从视图中消失)，但它的问题是，如果我用相同的SubComponent从MainComponent单击按钮，它将不会出现(我认为是因为组件仍然"活动")。

对此最好的解决方案是什么？我想在SubComponent上使用IDisposable，但ComponentName.Dispose()没有定义。

第1版：添加了我当前正在做的的示例

主组件(任务列表.rarzor)

<div class="col-12 outer-div row">
<TaskDetails TaskId="@SelectedTaskId" IsVisible="@IsTaskDetailsVisible"></TaskDetails>
</div>
...
<ul>
@for (int i = 0; i < MondayTasks.Count(); i++)
{
var myIndex = i;
<li class="btn" @onclick="@(() => LoadTaskDetailsForTask(MondayTasks[myIndex].Id))">
<a role="button">
<h4>@MondayTasks[i].Name</h4>
<p>@MondayTasks[i].DeadlineDate.Date.ToShortDateString()</p>
</a>
</li>
}
</ul>
...
private async Task LoadTaskDetailsForTask(int taskId)
{
SelectedTaskId = taskId;
IsTaskDetailsVisible = true;
await JSRuntime.InvokeVoidAsync("onScrollEvent");
}

子组件(TaskDetails.razor)

@if (IsVisible)
{
...
<div class="row">
<h2 class="inner-div title">@taskDetails.Name</h2>
<span class="closebtn" @onclick="()=> ToggleVisibility()">&times;</span>
</div>
//Display Information
}
...
protected async override void OnParametersSet()
{
taskDetails = await _dbTasks.GetTasksDetails(TaskId);
TaskItems = await _dbTasks.GetTasksItems(TaskId);
this.StateHasChanged();
}
private void ToggleVisibility()
{
IsVisible = !IsVisible;
}

第2版：添加了工作代码

主组件(任务列表.rarzor)

<CascadingValue Value="this">
<div class="col-12 outer-div row">
<TaskDetails TaskId="@SelectedTaskId" IsVisible="@IsTaskDetailsVisible"></TaskDetails>
</div>
</CascadingValue>
...
<ul>
@for (int i = 0; i < MondayTasks.Count(); i++)
{
var myIndex = i;
<li class="btn" @onclick="@(() => LoadTaskDetailsForTask(MondayTasks[myIndex].Id))">
<a role="button">
<h4>@MondayTasks[i].Name</h4>
<p>@MondayTasks[i].DeadlineDate.Date.ToShortDateString()</p>
</a>
</li>
}
</ul>
...
private async Task LoadTaskDetailsForTask(int taskId)
{
SelectedTaskId = taskId;
IsTaskDetailsVisible = true;
await JSRuntime.InvokeVoidAsync("onScrollEvent");
}
public void RemoveTaskDetails()
{
IsTaskDetailsVisible = false;
StateHasChanged();
}

子组件(TaskDetails.razor)

@if (IsVisible)
{
...
<div class="row">
<h2 class="inner-div title">@taskDetails.Name</h2>
<span class="closebtn" @onclick="()=> ToggleVisibility()">&times;</span>
</div>
//Display Information
}
...
[CascadingParameter]
public TaskList _Parent { get; set; }
protected async override void OnParametersSet()
{
taskDetails = await _dbTasks.GetTasksDetails(TaskId);
TaskItems = await _dbTasks.GetTasksItems(TaskId);
this.StateHasChanged();
}
private void ToggleVisibility()
{
_Parent.RemoveTaskDetails();
}

Answer 1

您有

[Parameter] bool IsVisible  {get; set; }
private void ToggleVisibility()
{
IsVisible = !IsVisible;
}

这是一种需要避免的模式：不要从组件内部更改参数。

您必须添加一个EventCallback并更改主组件上的IsTaskDetailsVisible。