事件回调问题父/子组件“没有与名称‘OnClickCallback’匹配的属性”

Question

问题

因此，我在 Blazor 中遇到一个问题，我试图从子组件 (NavMenu) 调用 MainLayout 父组件中的方法。我想要实现的目标是在从 NavMenu 子组件中的按钮被告知后在 MainLayout 父组件中打开一个对话框。

我假设这是允许的，因为 NavMenu 和 MainLayout 的父/子概念仍然相同。

我尝试过的

我已经按照Microsoft Docs Here进行操作，但似乎根本无法使其正常工作。我希望我做了一些愚蠢的事情，并且有一双新的眼睛可能会发现这个问题。

目前的结果

基本上，一切都构建得很好，但是当我运行该应用程序时，Web 控制台中会显示以下错误：

System.InvalidOperationException：“MyProject.Shared.Components.NavMenu”类型的对象没有与名称“OnClickCallback”匹配的属性。

代码

父组件（MainLayout）

<NavMenu OnClickCallback="@Foo()">
   <label>Text value: @text</label>
</NavMenu>

@code {
    private string text { get; set; }

    async Task Foo()
    {
        text = "IT WORKS";
        // In reality I will actually open a dialog here on the screen
    }
}

子组件（导航菜单）

<MatNavItem AllowSelection="false" @onclick="OnClickCallback">
    <MatIcon>settings</MatIcon><span class="miniHover"> Test App Settings</span>
</MatNavItem>

@code {

    [Parameter]
    public EventCallback OnClickCallback { get; set; }
    // I have also tried the "type" event callbacks such as public EventCallback<bool> OnClickCallback { get; set; } - but still get the same result
}

---

解决方案：

在一些有用的答案之后，这个问题是由于我有两个 NavMenu 组件，其中一个我认为 MainLayout 无法看到，但事实并非如此，所以我消除了两者之间的歧义。

一些答案还表明我的父组件OnClickCallback="@Foo()"应该是OnClickCallback="Foo"这实际上解决了我后来遇到的问题。

我的子组件现在也使用：

<MatNavItem AllowSelection="false" @onclick="@(() => OnClickCallback.InvokeAsync(true))">

要调用父组件中的回调，父组件现在将按预期打开我的对话框。

Answer 1

该错误非常字面意思：

... .NavMenu' 没有与名称“OnClickCallback”匹配的属性。

所以错误与您的代码不匹配。NavMenu 子组件确实具有该参数属性。

您应该使用<NavMenu OnClickCallback="Foo">、 no@或() but 无法解释此错误。

最好的猜测是您调用了 2 个组件<NavMenu>，而您正在查看错误的组件。