c# - Blazor - 绑定(bind)到服务的属性，由另一个组件更改

Question

更新(解决方案)

感谢 Magoo 先生的回答，我已经开始工作了。该解决方案是通过事件完成的，也显示在官方示例项目中 FlightFinder .

确保使用 singleton :

例子:Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<LoginService, ILoginService>();
}

登录服务.cs:

public event Action OnChange;
public async Task<bool> LoginFromLocalStorageAsync()
{
    var response = await _http.PostJsonAsync<TokenResult>("/api/auth", model);
    Token = response.Token;
    ExpireDate = response.ExpireDate;
    _http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", Token);
    OnChange?.Invoke(); // Here we invoke the event
}

NavMenu.cshtml:

protected override void OnInit()
{
    LoginService.OnChange += StateHasChanged;
}

初始问题

我目前正在尝试和学习 blazor。我有一个 NavMenu具有多个链接的组件，其中之一是:<a href="login">Login</a> ，应更改为 <a onclick="@Logout">Logout</a>用户登录后立即登录。登录发生在另一个组件(Login 组件)中，使用我自己的服务 LoginService .

LoginService有一个 Token Bearer Token 的属性和一个属性 public bool IsLoggedIn => !string.IsNullOrEmpty(Token); .我尝试使用带有 if-else 的简单绑定(bind)- Razor View 中的语句。那没有用，我的下一次尝试是使用 StateHasChanged();在我的 Login组件，一旦有人登录。也没有工作(可能是因为我想更新 NavMenu 而不是 Login ...)

NavMenu.cshtml:

@inject ILoginService LoginService 
@if(LoginService.IsLoggedIn) {
    <a href="logout">Logout</a>
}
else {
    <a href="login">Login</a>
}

登录.cshtml:

<form onsubmit="@Submit">
    <input type="email" placeholder="Email Address" bind="@LoginViewModel.Email" />
    <input type="password" placeholder="Password" bind="@LoginViewModel.Password" />
    <button type="submit">Login</button>
</form>

@functions
{
    public LoginViewModel LoginViewModel { get; } = new LoginViewModel();
    public async Task Submit()
    {
        await LoginService.LoginAsync(LoginViewModel);
    }
}

登录服务.cs

public class LoginService : ILoginService
{
    private readonly HttpClient _http;
    public LoginService(HttpClient http) => _http = http;
    public string Token { get; private set; }
    public bool IsLoggedIn => !string.IsNullOrEmpty(Token);
    public async Task<bool> LoginAsync(LoginViewModel model)
    {
        try
        {
            var response = await _http.PostJsonAsync<TokenResult>("/api/auth", model);
            Token = response.Token;
            return true;
        }
        catch (Exception)
        {
            return false;
        }
    }
}

不幸的是，NavMenu停留在 <a href="login">Login</a> .我正在考虑发送消息到 NavMenu来自 Login成分。我如何获得 NavMenu更新它的 View ？

Answer 1

您可以向 LoginService 添加一个事件，每当您的 Token 发生变化时都会引发该事件。

然后您的菜单组件可以订阅该事件(您已经注入(inject)了 LoginService)并调用 StateHasChanged()。

这将刷新 View 并更新客户端。