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

Posted 2023-03-27

【中文标题】如何在 Blazor 中以两种方式绑定级联值？

【英文标题】：How to two way bind a cascading value in Blazor?

【发布时间】：2020-04-11 08:11:54

【问题描述】：

我正在使用 Blazor 中的自定义模板，并试图找到一种方法来双向绑定 CascadingValue 或实现类似的东西。现在我有以下模板。

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

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

【问题讨论】：

您可以级联父级并更改他拥有的公共属性

【参考方案1】：

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

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

子组件

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

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

【讨论】：

感谢您回答我的问题！我了解两种方式的数据绑定，但问题是我想绑定一个孩子的孩子。我将它设置为 Parent->Child->template 并且我想在 Parent 和模板之间绑定 popUpVisible，理想情况下不要在 child 中添加任何额外的东西。

您可以通过在父级上使用 CascadingValue 组件，并在模板化组件上定义名为 PopupVisible 的 CascadingParameter 属性，将 popUpVisible 的值从父级传递到模板化组件。但是您不能使用级联值更新模板化组件中传递的参数。相反，您可以定义一个可以从父组件访问的服务（将服务注入父组件，为布尔属性赋值），

并从模板化组件（将服务注入到您的组件中，读取父组件中设置的值，分配一个新值，现在父组件可以访问新值，使用注入的服务）。您应该在 Startup.ConfigureServices 方法中将服务添加到 DI 容器

【参考方案2】：

您可以做的是，级联父组件并在子组件中访问您要更改的父属性，如下所示：

家长：

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

孩子：

[CascadingParameter]
public Parent Parent  get; set; 

.....

private void ChangeParentProperty()

    Parent.Property = ....; 

有任何疑问欢迎追问。