blazor为什么登录后我什么也看不到

Question

我仍在学习blazor，但可能有一些基本问题有人能告诉我为什么我看到登录屏幕，而在我登录后，我只看到没有内容的白色屏幕吗？

主布局：

@inherits LayoutComponentBase
@inject UserService u
@if (u.User != null)
{
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<article class="content px-4">
@Body
</article>
</main>
</div>
}
else
{
<LoginComponent></LoginComponent>
}

登录组件是一个表单，具有登录方法带有

@inject UserService us

提交时：

private LoginModel model = new LoginModel();
private  void OnValidSubmit()
{
try
{
us.LoginUser(model);
StateHasChanged();          
}
catch (Exception ex)
{
StateHasChanged();
}
}

用户服务注册为singelton

builder.Services.AddSingleton<UserService>();

现在它很简单，就像

public class UserService
{
public UserModel User ;

public  void LoginUser(LoginModel model)
{
if (model.Username=="xxx")
{               
this.User = new UserModel();
this.User.UserName = model.Username;
this.User.SurName = "asd'";                             
}
}
}

非常感谢和问候！

Answer 1

您的代码

us.LoginUser(model);
StateHasChanged();

在子组件中调用，因此对父组件刷新没有影响。

@if (u.User != null)

不会自动刷新。

您可以在UserService中声明一个事件，如：

public class UserService
{
public UserModel User ;
public EventHandler OnUserLoggedIn;
public  void LoginUser(LoginModel model)
{
if (model.Username == "xxx")
{               
this.User = new UserModel();
this.User.UserName = model.Username;
this.User.SurName = "asd'";
OnUserLoggedIn?.(this, null);
}
}
}

在您的MainLayout中添加：

@code
{
protected override void OnInitialize()
{
u.OnUserLoggedIn += (_, __) => this.StateHasChanged();
}
}

通过这种方式，登录操作将在MainLayout上调用StateHasChanged((。没有运行代码，所以可能有一些小的近似值。