将函数从 Razor 页面传递到 RCL 组件不起作用

问：

我正在 Razor 组件库中创建一个可搜索的下拉菜单，并在 Razor 页面中调用它。（在引用的同一解决方案中分离项目，这与显示其他组件一样工作）。

我想将函数作为 Razor 组件传递给 Razor 组件，以便我可以在 razor 页面中使用所选选项。但是，我的问题是每当我传递函数时，我都会收到以下错误。。EventCallBack<string>

这是我的代码site.cshtml

@page
@model TempName.Pages.Sites.SiteListModel
@{
    ViewData["Title"] = "Sites";
}

<div class="container mt-4">
    <div class="row mb-4">
        <div class="col-12 d-flex align-items-center justify-content-end">
            <div class="me-3">
                <component 
                    type="typeof(SearchableDropdown)" 
                    render-mode="ServerPrerendered" 
                    [email protected]
                    param-OnOptionSelected="@Model.OnSelect"
                 />
            </div>
            <button class="btn btn-primary">
                <i class="fa-solid fa-file-export me-2"></i>
                Export to CSV/Excel
            </button>
        </div>
    </div>

    <h1>@Model.SelectedValue</h1>



    <div class="row">
        <div class="col-12 mb-4">
            <component type="typeof(Table)" render-mode="ServerPrerendered" [email protected] />
        </div>
    </div>
</div>

SiteList.cshtml.cs

namespace TempName.Pages.Sites
{
    [Authorize]    
    public class SiteListModel : PageModel
    {

        public TableComponentModel TableParam { get; set; }

        public SearchableDropdownModel SearchableDropdownModel { get; set; }

        public void OnGet()
        {
            // Searchable Dropdown Menu
           SearchableDropdownModel = new SearchableDropdownModel()
           {
            // Data Here (Removed)
           }

        public string SelectedValue { get; set; } = "Select a country";

        public void OnSelect(string option)
        {
            SelectedValue = option;
        }
    }
};

然后这是 Razor 组件SearchableDropdown.razor

<div class="wrapper @classToggle">
    <div class="select-btn" @onclick=ToggleOptions>
        <span>@SelectedOption.Name</span>
        <i class="fa-solid fa-chevron-down"></i>
    </div>
   <div class="content">
       <div class="search">
           <i class="fa-solid fa-magnifying-glass"></i>
            <input type="text" value="@SearchTerm" placeholder="Search" @oninput=UpdateSearchTerm />
       </div>
       <ul class="options">
            @foreach (var option in Model.Options)
            {
                <li @onclick="() => UpdateSelectedOption(option)">
                    @option.Name
                </li>
            }

        </ul>
    </div>
</div>


@code {
    private string _inputId = Guid.NewGuid().ToString();

    public string classToggle = "";
    public string SearchTerm { get; set; } = "";
    public OptionModel SelectedOption { get; set; } = new OptionModel() { Name = "Select a Site", Key = "Null" };
    public List<OptionModel> OptionStore { get; set; }

    [Parameter]
    public SearchableDropdownModel Model { get; set; }

    [Parameter]
    public EventCallback<string> OnOptionSelected { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender) OptionStore = Model.Options;
    }

    // Toggle Dropdown
    public void ToggleOptions() => classToggle = classToggle == "" ? "active" : "";

    // Update Search Value oninput
    public void UpdateSearchTerm(ChangeEventArgs e)
    {
        SearchTerm = e.Value.ToString();
        Model.Options = OptionStore.Where(x => x.Name.ToLower().Contains(SearchTerm.ToLower())).ToList();
    }

    // OnClick update the selected option
    public async void UpdateSelectedOption(OptionModel option)
    {
        SelectedOption = option;
        ToggleOptions();
        Model.Options = OptionStore;
        SearchTerm = "";

        // Call the callback the call back and pass the selected option
       await OnOptionSelected.InvokeAsync("Test");
    }  
}

任何支持都会很棒，已经坚持了一段时间！