[英]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;
}
注意:如果您需要一些解释,并认为我没有回答您的问题,请不要犹豫,告诉我,但请花时间说出您的问题......我无法完全理解问题。
您可以做的是,级联父组件并在子组件中,访问您要更改的父属性,如下所示:
家长:
<CascadingValue Value="this">
<Child />
</CascadingValue>
孩子:
[CascadingParameter]
public Parent Parent { get; set; }
.....
private void ChangeParentProperty()
{
Parent.Property = ....;
}
有任何疑问随时问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.