如何向 Blazor 组件添加自定义事件？

Question

我在我的 Blazor 服务器端应用程序中创建了一个选项卡控件，based on a tutorial。该控件工作正常，但我希望能够知道活动页面何时更改。因此我在代码中添加了一个事件：

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>

如何实现这一目标？

Answer 1

How would a EventCallback property look like for my case above?

我在想与你所拥有的并没有太大的不同

@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(){

如何向 Blazor 组件添加自定义事件？

How to add a custom event to a blazor component?

c#

asp.net

events

blazor