文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Blazor中双向绑定级联值？

问如何在Blazor中双向绑定级联值？
EN

Stack Overflow用户

提问于 2019-12-18 17:57:30

回答 2查看 4.4K关注 0票数 8

我正在使用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参数，而不必将其绑定到子参数并将其传递给模板。我还没有找到双向绑定级联参数的方法，但如果可能的话，我认为这将是最好的方法。除此之外，我不确定是否还有其他方法，或者我必须遵循我当前传递值的想法。

.net

blazor

blazor-server-side

two-way-binding

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-12-18 19:06:53

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

我不确定我是否理解您的question...however，如果您希望从父组件传递一个值并返回；您可以这样做:注意:这是一个双向组件数据绑定。

子组件

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

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

票数 8

Stack Overflow用户

发布于 2021-07-30 10:40:28

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

父级：

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

儿童：

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

.....

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

任何疑问都可以随便问。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59397707

复制

相似问题

问如何在Blazor中双向绑定级联值？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Blazor中双向绑定级联值？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Blazor中双向绑定级联值？
EN