Blazor 事件回调问题 parent/child 组件 "does not have a property matching the name 'OnClickCallback'"

Question

问题

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

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

我试过的

我已经按照 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))">

在父组件中调用回调，这又会按预期打开我的对话框。

感谢所有帮助过它的人。

Answer 1

错误很直白：

... .NavMenu' does not have a property matching the name 'OnClickCallback'.

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

你应该使用 <NavMenu OnClickCallback="Foo">，而不是 @ 或 () 但这不能解释这个错误。

最好的猜测是您有 2 个名为 <NavMenu> 的组件，而您看错了一个。

Blazor 事件回调问题 parent/child 组件 "does not have a property matching the name 'OnClickCallback'"

Blazor Event Callback issue parent/child component "does not have a property matching the name 'OnClickCallback'"

html

c#

events

callback

blazor