如何在 Blazor 中以两种方式绑定级联值?
How to two way bind a cascading value in Blazor?
我正在使用 Blazor 中的自定义模板,我正在尝试找到一种双向绑定 CascadingValue
或实现类似功能的方法。现在我有以下模板。
@if (PopupVisible)
{
<DxPopup>
<HeaderTemplate>
<h4 class="modal-title">@HeaderText</h4>
<button type="button" class="close" @onclick="@UpdatePopupVisible">×</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
参数,而不必将其绑定到子级并让子级将其传递给模板。我还没有找到双向绑定级联参数的方法,但如果可能的话,我认为这将是最好的方法。除此之外,我不确定是否还有其他方法,或者我将不得不采用我目前传递值的想法。
您不能使用级联参数进行双向绑定。级联意味着顺流而下,从父级到子级,而不是相反。
我不确定我是否理解您的问题...但是,如果您希望从父组件传递一个值并返回;您可以执行以下操作:
注意:这是一个双向组件数据绑定
子组件
@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 组件中,访问你想要更改的 parent 属性 ,如下所示:
Parent:
<CascadingValue Value="this">
<Child />
</CascadingValue>
Child:
[CascadingParameter]
public Parent Parent { get; set; }
.....
private void ChangeParentProperty()
{
Parent.Property = ....;
}
如有任何疑问,请随时提出。
我正在使用 Blazor 中的自定义模板,我正在尝试找到一种双向绑定 CascadingValue
或实现类似功能的方法。现在我有以下模板。
@if (PopupVisible)
{
<DxPopup>
<HeaderTemplate>
<h4 class="modal-title">@HeaderText</h4>
<button type="button" class="close" @onclick="@UpdatePopupVisible">×</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
参数,而不必将其绑定到子级并让子级将其传递给模板。我还没有找到双向绑定级联参数的方法,但如果可能的话,我认为这将是最好的方法。除此之外,我不确定是否还有其他方法,或者我将不得不采用我目前传递值的想法。
您不能使用级联参数进行双向绑定。级联意味着顺流而下,从父级到子级,而不是相反。
我不确定我是否理解您的问题...但是,如果您希望从父组件传递一个值并返回;您可以执行以下操作: 注意:这是一个双向组件数据绑定
子组件
@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 组件中,访问你想要更改的 parent 属性 ,如下所示:
Parent:
<CascadingValue Value="this">
<Child />
</CascadingValue>
Child:
[CascadingParameter]
public Parent Parent { get; set; }
.....
private void ChangeParentProperty()
{
Parent.Property = ....;
}
如有任何疑问,请随时提出。