Blazor组件内按钮点击事件无响应问题求助

我在Blazor示例里碰到个诡异的问题，点击组件里的按钮完全没反应，实在摸不着头绪，希望有人能帮忙看看！

首先看我的LoginView.razor文件：

@page "/loginMvvm";
@using ProjectPlanningFramework.Parts.Login
@rendermode InteractiveServer
        
<h1>LoginView</h1>
    
<LoginComponent  />
<button @onclick="ShowAlert" class="btn btn-primary">Click Me</button>
 
@code {
   [Inject] IJSRuntime JS { get; set; } = default!;
        
   private async Task ShowAlert()
   {
     await JS.InvokeVoidAsync("alert", "Hello from Blazor!");
   }
}

这个文件里的按钮点击后能正常弹出提示框，功能是完全正常的。

但问题来了，LoginComponent里的按钮却完全没反应...

以下是LoginComponent.razor的代码：

@using Microsoft.JSInterop
    
<h1>Component Login</h1>
    
<button @onclick="ShowAlert" class="btn btn-primary">btn Alert</button>
    
@code {
  [Inject] IJSRuntime JS { get; set; } = default!;
    
  private async Task ShowAlert()
  {
    await JS.InvokeVoidAsync("alert", "Hello from Blazor!");
  }
}

就是这个LoginComponent里的按钮不管用，实在不知道哪里出问题了，真心求帮忙！

备注：内容来源于stack exchange，提问作者Teckniel