提问人：Roland Deschain 提问时间：2/25/2022 更新时间：2/25/2022 访问量：5073
如何将自定义事件添加到 blazor 组件？
How to add a custom event to a blazor component?
问：
我根据教程在 blazor 服务器端应用程序中创建了一个选项卡控件。该控件工作正常，但是我希望能够分辨活动页面何时更改。因此，我在代码中添加了一个事件：
internal void ActivatePage(TabPage page)
{
OnTabSelectionChanged();
ActivePage = page;
}
public delegate void TabSelectionChangedEventHandler(object source, EventArgs args);
public event TabSelectionChangedEventHandler TabSelectionChanged;
protected virtual void OnTabSelectionChanged()
{
TabSelectionChanged?.Invoke(this, EventArgs.Empty);
}
现在，我想在使用控件的 blazor 组件中执行以下操作：
<TabControl @TabSelectionChanged="MyFunction">
<TabPage Text="tab #1">
<!-- content -->
</TabPage>
<TabPage Text="tab #2">
<!-- content -->
</TabPage>
<TabPage Text="tab #3">
<!-- content -->
</TabPage>
</TabControl>
如何实现这一目标？
答：
7赞
Caius Jard
2/25/2022
#1
对于我上面的情况，EventCallback 属性会是什么样子？
我当时想的和你所拥有的没有太大区别
@code{
[Parameter]
public EventCallback<TabPage> TabPageActivated { get; set; }
internal async Task ActivatePage(TabPage page)
{
ActivePage = page;
await TabPageActivated.InvokeAsyc(page);
}
}
并在 blazor 中执行以下操作，它使用控件：
<TabControl @TabPageActivated="MyFunction">
<TabPage Text="tab #1">
<!-- content -->
</TabPage>
<TabPage Text="tab #2">
<!-- content -->
</TabPage>
<TabPage Text="tab #3">
<!-- content -->
</TabPage>
</TabControl>
@code{
private async Task MyFunction(TabPage t){
...
}
}
如果你不想要参数 TabPage，那么更像是：
public EventCallback TabPageActivated { get; set; }
...
await TabPageActivated.InvokeAsyc();
...
private async Task MyFunction(){
评论
1赞
Roland Deschain
2/25/2022
呵呵，我正要写自己的答案:)谢谢！
0赞
Roland Deschain
2/25/2022
需要注意的是：我认为必须使用 .至少否则我会收到错误。?HasDelegate
1赞
Caius Jard
2/25/2022
对不起，那是复制粘贴的错别字！如果 InvokeAsync 并且没有委托，它不会崩溃任何内容，并且 EventCallback 不能为 null，因为它是结构的类级实例，因此即使未设置显式设置，也会获取默认值，但 HasDelegate 可用于检测它是否出于其他原因而设置
0赞
Thomas Neuberger
8/30/2023
在父控件中挂接事件时，我不得不将“@”保留在 TabPageActivated 的前面。可能是因为我在 ASP.NET 7 上，当您发布该答案时尚未发布。
评论
[Parameter] public EventCallback<YourEventArgsClassHere> OnXxx { get; set; }OnClick