Question

我正在玩Blazor中的自定义模板，而我试图找到一种方法来实现级联值的双向转换或实现类似的目标。现在，我有以下模板。

@if (PopupVisible)
{
    <DxPopup>
        <HeaderTemplate>
            <h4 class="modal-title">@HeaderText</h4>
            <button type="button" class="close" @onclick="@UpdatePopupVisible">&times;</button>
        </HeaderTemplate>
        <ChildContent>
            <div class="modal-body">
                <div class="container-fluid">
                  @bodyContent
                </div>
            </div>
            <div class="modal-footer">
                @footerContent
                <button class="btn btn-secondary" @onclick="UpdatePopupVisible">Cancel</button>
            </div>
        </ChildContent>
    </DxPopup>
}

@code {
    [CascadingParameter] public bool PopupVisible { get; set; }
    [CascadingParameter] public EventCallback<bool> PopupVisibleChanged { get; set; }

    [Parameter] public RenderFragment HeaderText { get; set; }
    [Parameter] public RenderFragment footerContent { get; set; }
    [Parameter] public RenderFragment bodyContent { get; set; }

    private async Task UpdatePopupVisible()
    {
        PopupVisible = false;
        await PopupVisibleChanged.InvokeAsync(PopupVisible);
    }
}

然后，我有一个实现此模板（子级）的组件，然后有一个通过按钮press（父级）调用的组件。我想知道的是，是否有一种方法可以从父级绑定PopupVisible参数，而不必将其绑定到子级并将子级传递给模板。我还没有找到双向绑定级联参数的方法，但是如果可能的话，我认为这是最好的方法。除此之外，我不确定是否还有其他方法或必须与我当前传递值的想法相结合。

Answer 1

您不能使用级联参数进行双向绑定。级联意味着从父母到孩子，而不是相反的方向向下游流动。

我不确定我是否理解您的问题...但是，如果您希望从父组件传递一个值并返回；您可以执行以下操作：注意：这是双向组件数据绑定

子组件

conda-forge

用法

@code
{
    private bool visible;
    [Parameter]
    public bool PopupVisible
    {
        get { return visible }
        set
        {
            if (visible != value)
            {
                visible = value;

            }
        }
    } 

   [Parameter] public EventCallback<bool> PopupVisibleChanged { get; set; }
   // Invoke the EventCallback to update the parent component' private field visible with the new value.

   private Task UpdatePopupVisible()
    {
        PopupVisible = false;
        return PopupVisibleChanged.InvokeAsync(PopupVisible);
    }
}

注意：如果您需要一些解释，并且认为我没有回答您的问题，请随时告诉我，但是请花点时间表达您的问题……我无法完全理解问题。

Answer 2

你可以做的是，级联父组件，并在子组件中，像这样访问要更改的父属性：

家长：

<CascadingValue Value="this">
    <Child />
</CascadingValue>

孩子：

[CascadingParameter]
public Parent Parent { get; set; }

.....

private void ChangeParentProperty()
{
    Parent.Property = ....; 
}

如有任何疑问，请随时提出。

如何在Blazor中以两种方式绑定级联值

2 个答案:

子组件

用法