C# 如何在Blazor中双向绑定级联值

我在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);
    }
}

@if（弹出可见）
{
@标题文字
&时代；
@身体内容
@页脚内容
取消
}
@代码{
[CascadingParameter]公共bool PopupVisible{get；set；}
[CascadingParameter]公共事件回调PopupVisibleChanged{get；set；}
[参数]公共RenderFragment头文本{get；set；}
[参数]公共RenderFragment footerContent{get；set；}
[参数]公共RenderFragment bodyContent{get；set；}
私有异步任务UpdatePopupVisible（）
{
PopupVisible=false；
等待PopupVisibleChanged.InvokeAsync（PopupVisibleChanged）；
}
}

---

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

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

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

子组件

@code
{
私有布尔可见；
[参数]
公共bool弹出窗口可见
{
获取{返回可见}
设置
{
如果（可见！=值）
{
可见=价值；
}
}
} 
[参数]公共事件回调PopupVisibleChanged{get；set；}
//调用EventCallback以使用新值更新父组件的可见私有字段。
私有任务UpdatePopupVisible（）
{
PopupVisible=false；
返回PopupVisibleChanged.InvokeAsync（PopupVisibleChanged）；
}
}

用法

@page/“
@代码{
私有布尔可见；
}

---

注意：如果您需要一些解释，并且相信我没有回答您的问题，请毫不犹豫地告诉我，但请花时间表达您的问题。。。我不能完全理解问题。

谢谢你回答我的问题！我理解双向数据绑定，但问题是我想绑定一个孩子的孩子。我将其设置为Parent->Child->template，我希望在父级和模板之间绑定popUpVisible，理想情况下不在Child中添加任何额外内容。您可以使用父级上的CascadingValue组件将popUpVisible的值从父级传递到模板化组件，以及在模板化组件上定义名为PopupVisible的CascadingParameter属性。但不能使用级联值更新模板化组件中传递的参数。相反，您可以定义一个可以从父组件（将服务注入父组件，为布尔属性赋值）和模板化组件访问的服务（将服务注入组件，读取父组件中设置的值，分配新值，现在父组件可以使用注入的服务访问新值）。您应该在Startup.ConfigureServices方法中将服务添加到DI容器中

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

@page "/"

<DxPopup @bind-PopupVisible="visible" />

@code {
    private bool visible;
}