Blazor 事件回调问题父/子组件“没有与名称 'OnClickCallback' 匹配的属性”答案

【问题标题】：Blazor Event Callback issue parent/child component "does not have a property matching the name 'OnClickCallback'"Blazor 事件回调问题父/子组件“没有与名称 'OnClickCallback' 匹配的属性”
【发布时间】：2020-10-29 11:56:20
【问题描述】：

问题

所以我在 Blazor 中有一个问题，我试图从子组件 (NavMenu) 调用 MainLayout 父组件中的方法。我想要实现的只是在被告知从 NavMenu 子组件中的按钮之后在 MainLayout 父组件中打开一个对话框。

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

我的尝试

我已关注Microsoft Docs Here，但我似乎根本无法让它工作。我希望我在做一些愚蠢的事情，而新的眼睛可能会发现问题。

目前的结果

基本上，一切正常，但是当我运行应用程序时，Web 控制台中显示以下错误：

Error: System.InvalidOperationException: Object of type 'MyProject.Shared.Components.NavMenu' does not have a property matching the name '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
    }
}

子组件（NavMenu）

<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))">

调用父组件中的回调，这反过来又按预期打开了我的对话框。

感谢所有帮助它的人。

【问题讨论】：

我已经更新了我的答案。试试代码...
解决方案添加到问题底部

标签： c# html events callback blazor

【解决方案1】：

这个错误很直接：

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

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

您应该使用<NavMenu OnClickCallback="Foo">，而不是@ 或()，但这无法解释此错误。

最好的猜测是您有 2 个名为 <NavMenu> 的组件，而您正在查看错误的组件。

【讨论】：