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

Question

我根据教程在 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>

如何实现这一目标？

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