【问题标题】:Blazor 'Global' Parameter - passing between MainLayout.razor , NavMenu.razor, Counter.razor - back and forthBlazor 'Global' 参数 - 在 MainLayout.razor 、 NavMenu.razor 、 Counter.razor 之间传递 - 来回传递
【发布时间】:2020-08-04 19:56:36
【问题描述】:

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

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

当前计数:@currentCount

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

【问题讨论】:

    标签: blazor blazor-server-side


    【解决方案1】:

    有两种方法可以做到这一点。

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

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

    状态容器可能更适合GLOBAL object that is accessible from all the razor pages and components

    使用[参数]?

    您应该使用CascadingParameter,而不是将所有参数向下传递给组件

    创建一个静态类?

    您应该使用“状态容器”而不是创建静态类

    【讨论】:

      【解决方案2】:

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

      1. 父组件可以通过传递组件参数和引发事件来让父组件知道发生了什么事情,反之亦然。

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

      SomeComponent.razor

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

      我不喜欢使用这个功能。实际上,我从不使用它。据称它的使用可能会出现问题等。但是,它是 Blazor 的合法部分,如果您愿意,没有理由不使用它...

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

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

      您应该实施一项服务。见第 3 条。

      创建一个静态类?

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

      在 Blazor 中推荐的方法是什么?

      这一切都取决于您的需要和要求...

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

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

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

      希望这会有所帮助...

      【讨论】:

        【解决方案3】:

        一种方法是使用注入到允许事件订阅的组件中的单例服务。实际上,我几天前就和其他人讨论过这个问题。

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

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

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

        【讨论】:

        • Thx!!!!!!!!!.. 在您的演示中 - 您如何使用计数更新 NavMenu?

          计数值:@Service.CountValue

          需要从 IndexBase 继承吗?我需要更新所有组件...
        • 我认为最简单的方法是将@inherits OwningComponentBase放在导航菜单的顶部,然后在@code块中注入服务,添加OnStatusChanged方法,然后执行OnInitializedAsyncDispose 的覆盖就像我做的那样,带有事件订阅和取消订阅。从那里,您可以像上面那样绑定计数器。我还没有尝试过,但它应该可以工作。让我知道这是否有帮助。
        • 似乎无法正常工作 - 添加了 @inherits OwningComponentBase,添加了 首页

          计数值:@Service.CountValue

          计数值:@Service.CountValue

          计数值:@Service. CountValue

          添加在代码 [Inject protected SingleService Service { get;放; }公共字符串状态{获取;放; } private async void OnStatusChangedMethod(object sender, EventArgs e){
        • 查看this repo,它在导航栏上有一个按钮,可以像索引屏幕一样响应事件。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-06-08
        • 1970-01-01
        • 2018-12-21
        相关资源
        最近更新 更多