Blazor“全局”参数-在MainLayout.razor,NavMenu.razor,Counter.razor之间传递-来回

时间:2020-04-21 22:21:08

标签: blazor blazor-server-side

给出一个“默认” Blazor应用程序-使用Visual Studio 2019 Blazor服务器模板创建的。如何创建可从所有剃刀页面和组件访问的 GLOBAL 对象。

如何在MainLayout,NavMenu,索引页面上使“当前计数”值可见并动态更新?

当前计数:@currentCount

  • 使用[Parameters]吗?
  • 使用[CascadingParameter]吗?
  • 创建静态类?
  • Blazor中推荐的方法是什么?

3 个答案:

答案 0 :(得分:3)

一种实现方法是使用注入到允许事件订阅的组件中的单例服务。我实际上是几天前与其他人讨论的。

Check out this post讨论了从单例触发的事件中动态更新页面的事件,该事件跨连接更新。

我从正在处理的另一个项目改编的

Here is a working demo,当您运行该项目时,它会指示您打开另一个浏览器,复制/粘贴URL,并具有一个正在运行的计数器,该计数器会进行更新和一个文本框用于在页面之间传递消息。在框中输入内容,单击按钮,计数器将在所有连接的客户端的所有页面上更新,并且消息也将传递到所有页面并显示。跨浏览器和跨连接工作。

可以使用类似的概念来构建诸如长期运行任务的后台通知,用户登录通知等内容。可以非常灵活地满足我的需求。

答案 1 :(得分:2)

组件之间的通信可以通过三种方式来实现,具体取决于您的需求。

  1. 父组件可以通过传递组件参数并引发事件以使父组件发生了某些事情而与子组件进行通信,反之亦然。

  2. 您可以启用CascadingValue功能,以将值传递给下游的所有子级,这些子级定义了CascadingParameter的属性。级联值可以是一个简单的字符串,但也可以是一个完整的组件。这是通过在要传递引用的组件中使用关键字this设置CascadingValue的Value属性来实现的,如下所示:

SomeComponent.razor

<CascadingValue Value="this">
   @ChildContent
</CascadingValue>

我不喜欢使用此功能。实际上,我从不使用它。声称它的使用可能有问题,等等。但是,它是Blazor的合法组成部分,并且如果您愿意...没有理由不使用它。

  1. 实现状态模式和通知模式的服务。通常,您创建这样的服务来管理您应用程序的数据状态,这包括将数据存储在集合中,从数据库中检索数据等,使组件能够将数据存储在服务的集合中,通过引发事件处理程序来通知组件以及传递数据只是由另一个组件等添加的。

给出一个'默认'Blazor应用程序-使用Visual Studio 2019 Blazor服务器模板创建。如何创建可从所有剃刀页面和组件访问的GLOBAL对象。

您应该实施一项服务。参见编号3。

创建静态类?

否,没有静态类。创建服务

Blazor中推荐的方法是什么?

这完全取决于您的需求和要求...

如何在MainLayout,NavMenu,索引页面上使“当前计数”值可见并动态更新?

仅通过创建一项服务,该服务允许您从给定位置传递当前计数,并将其传递给其他组件,例如MainLayout,NavMenu,Index页面。

注意:我已经使用工作代码详细回答了此类问题。我不知道他们的位置(到目前为止有400个答案),但是您可以转到我的个人资料页面寻找他们。

希望这对您有帮助...

答案 2 :(得分:1)

有两种方法。

CascadingParameter和“状态容器”在this article中有很好的解释。

CascadingParameter和“状态容器”之间,您应该了解您的应用程序如何工作并决定要做什么。

状态容器可能更适合GLOBAL object that is accessible from all the razor pages and components之类的东西。

使用[Parameters]吗?

您应该使用CascadingParameter

而不是将所有参数传递给组件。

创建静态类?

您应该使用“状态容器”来代替创建静态类