Blazor-是否可以从MainLayout触发页面组件中的函数

Question

我的MainLayout.razor组件中有一个侧抽屉，用于设置/更改某些值，然后在整个应用程序中使用这些值。

<CascadingValue Value="@appValues" Name="AppValue">
<SideDrawer OnUpdate="@RefreshPage"></SideDrawer>
<div class="content px-4">
@Body
</div>
</CascadingValue>

当我更新SideDrawer中的值时，我会执行EventCallback，通过它我可以更新变量，然后这些变量可以用作整个页面组件的级联值。

@code{
public AppValues appValues = new AppValues();
protected void RefreshPage()
{
appValues.value1 = somevaluefromsidedrawer;
appValues.value2 = someothervaluefromsidedrawer;
StateHasChanged();
}
}

这些级联值在页面组件中得到了很好的更新。但问题是，在页面组件中，有一种方法(比如LoadData()(，其中某些数据集应该基于这些级联值进行更新。

@code{
[CascadingParameter(Name = "AppValue")]
protected AppValues appValues { get; set; }
protected void RefreshCurrentPage()
{
LoadData(appValues.value1);
}
}

理想情况下，我希望能够从MainLayout.razor组件的RefreshPage()方法调用页面组件中的RefreshCurrentPage()方法，以便页面组件中所有的数据集都基于更新后的值进行刷新。

有可能做这样的事吗？

Answer 1

您可以通过多种方式做到这一点：

您可以将对MainLayout组件的引用以CascadingValue组件的形式传递给感兴趣的子组件，如下所示：

<CascadingValue Value="this" Name="TheMainLayout">

</CascadingValue>

子组件应该获取这样的引用：

@code{
[CascadingParameter(Name = "TheMainLayout")]
public MainLayout MainLayout { get; set; }

}

并将自己添加到MainLayout组件中定义的组件列表中：

// Child component adds itself to the  MainLayout component
protected override void OnInitialized()
{
MainLayout.AddPage(this);
}

在MainLayout组件中，您将定义ComponentBase对象的列表，和AddPage方法如下：

public void AddPage(ComponentBase page)
{
// Code to add the page component to the list
}

既然MainLayout拥有对组件的引用，它就可以直接调用在每个添加的页面组件中定义的RefreshCurrentPage(我想它只能是一个，因为我们谈论的是可路由组件，对吧(。

注：以上只是解决方案的概要。您可以扩展它以提供一个事件，该事件在每次需要刷新数据时都会引发，并且每个页面组件都应该订阅该事件，当引发该事件时，会调用RefreshCurrentPage方法。这是一种比直接从MainLayout调用RefreshCurrentPage更好、更复杂的方法。

您应该提供代码来从组件列表中删除添加的组件引用，当这些组件被杀死时，等等。

请注意，不再需要appValues的CascadingValue，因为子组件拥有对MainLayout的引用，并且可以直接访问这些值。

注意：以上所有过程都可以通过注入MainLayout组件及其子级的服务类来实现。

再见，伙计。。。

Answer 2

我是Blazor(服务器(的新手，由于得到了公认的答案，我能够解决我遇到的一个类似问题，即我想要一个组件来触发父页面的重新呈现。

我最终做了如下。

// My Parent Page (ParentPage.razor)
<Component ParentPage=this/>
public void StateHasChanged()
{
// Call the StateHasChanged method in the page's base class
base.StateHasChanged();
}

然后在我的组件中，页面上有很多(component.rarzor(

[Parameter] 
private ParentPage ParentPage { get; set; }
private void RefreshParent()
{
this.ParentPage.StateHasChanged();
}

我现在可以从我的组件中调用RefreshParent((方法，当状态发生变化时，它可以很好地触发页面的重新呈现。

为了更好地衡量，我添加了一个null检查，以确保在使用重载的OnParameterSet((方法实例化组件时始终设置参数。