Question

我用

制作了一个新的blazor应用程序

dotnet new blazor

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0

然后我在本教程中添加了父级和子级剃须刀组件

Parent.razor

@page "/ParentComponent"

<h1>Parent-child example</h1>

<ChildComponent Title="Panel Title from Parent"
                OnClick="@ShowMessage">
    Content of the child component is supplied
    by the parent component.
</ChildComponent>

<p><b>@messageText</b></p>

@functions {
    private string messageText;

    private void ShowMessage(UIMouseEventArgs e)
    {
        messageText = "Blaze a new trail with Blazor!";
    }
}

Child.razor

<div class="panel panel-default">
    <div class="panel-heading">@Title</div>
    <div class="panel-body">@ChildContent</div>

    <button class="btn btn-primary" onclick="@OnClick">
        Trigger a Parent component method
    </button>
</div>

@functions {
    [Parameter]
    private string Title { get; set; }

    [Parameter]
    private RenderFragment ChildContent { get; set; }

    [Parameter]
    private EventCallback<UIMouseEventArgs> OnClick { get; set; }
}

它的工作方式是显示子项以及从父项传递到子项的文本内容以及标题...但是没有按钮，因此没有消息，也没有消息文本的更新

Answer 1

您的组件（.razor）是否位于名为Pages的文件夹中？尝试关闭Visual Studio，然后再次运行您的应用程序。这很奇怪...

Answer 2

页面文件名是否必须与@Page定义的路由匹配？

尽管显示不一样，但没有错误消息？

将我的Parent.razor和Child.razor重命名为ParentComponent.razor和ChildComponent.razor进行了修复。请原谅我的无知。谢谢。

编辑：哦，我猜文件名必须与剃刀代码中的“ ChildComponent”匹配

Blazor父子示例按钮丢失了吗？

2 个答案: