如何从 blazor 元素的点击事件创建 observable 或

问题描述

@* test.razor *@

<button>click</button>

我在剃刀组件中有一个按钮，我想从它的单击事件创建一个 Observable，但我不知道该怎么做。有人可以帮我吗？

解决方法

您可以使用 ReactiveUI（在 Nuget 上）。

C# ViewModel 构造函数

public class MyViewModel : ReactiveObject
{
   public ReactiveCommand<Unit,Unit> MyCommand {get;}

   public MyViewModel()
   {
       MyCommand = ReactiveCommand.Create((_)=> // do some work);
   }
}

MyComponent.razor

@inherits ReactiveComponentBase<MyViewModel>

<button @onclick=@(()=> ViewModel.MyCommand.Execute().Subscribe() )>click</button>

或

如果您拒绝使用 ReactiveUI（很好！），您可以创建自己的主题。只要确保妥善处理所有物品即可。

MyComponent.razor

<button @onclick=@(()=> command.OnNext(Unit.Default) )>click</button>

@code{
   private Subject<Unit> command = new Subject<Unit>();
   public IObservable<Unit> Command => command.AsObservable();
}

如果有一个像在基于 C# 的常规 UI 中那样处理的事件，那么我们可以使用 Observable.FromEvent 模式，但 Blazor 不会处理这样的事件。使用 C#（UWP、Xamarin）构建的 UI 改用命令模式。这就是 ReactiveUI 中有 ReactiveCommand 的原因。 UI 按钮通常会理解如何处理实现 ICommand 的东西，这使它能够在命令处于非活动状态时禁用自身。 （即当您还没有完成处理命令时）没有多少 Blazor 组件可以直接处理 ICommand，但您可以手动让它与它们一起工作。 BlazorFluentUI 具有与命令配合使用的按钮。 （这是我工作的组件库。）