Blazor - 如何删除子组件

Question

背景

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

问题

当我想在SubComponent 上放置一个关闭按钮时出现问题：我尝试在其上创建一个按钮并制作：IsVisible = !IsVisible。虽然这在某种程度上确实有效（它使组件从视图中消失），但它的问题是，如果我从 MainComponent 使用相同的 SubComponent 单击按钮，它将不会出现（我假设因为组件是仍然“活着”）。

解决这个问题的最佳方法是什么？我正在考虑在SubComponent 上使用IDisposable，但未定义ComponentName.Dispose()。

Edit1：添加了我当前正在做的示例

MainComponent (TaskList.razor)

    <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;
}

Edit2：添加了工作代码

MainComponent (TaskList.razor)

    <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。