1

背景

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

问题

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

最好的解决方案是什么？我正在考虑在IDisposable上使用SubComponent，但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();
}
4

1 回答 1

2

你有

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

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

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

于 2021-08-18T11:02:44.617 回答