c# - 如何从代码更新 Blazor 静态布局

Question

我有一个带有边栏的主布局，授权用户和非授权用户的侧边栏不同。我要更新的地方是这样的

        <AuthorizeView>
            <Authorized>
                // Personal information matches in this component (it's just one more div this some code in it)
                <UserInfo />
            </Authorized>
            <NotAuthorized>
                <div class="sidebar-unathorized">
                    <span>
                        To get all privileges, <a href="/register"><strong>register</strong></a> or <a href="/login"><strong>login</strong></a> please
                    </span>
                </div>
            </NotAuthorized>
        </AuthorizeView>

用户通过授权后，我想让他看到他的个人信息，所以在我的登录方法中我做了一些事情，比如

public async void HandleValidSubmit()
{
    ...
   ((CustomAuthenticationStateProvider)authenticationStateProvider).AuthenticateUser(authorizedUser);
   navigationManager.NavigateTo("/");
   //here I want to update the layout
    ...
    return;
}

在设置当前用户后，在我的 CustomAuthenticationStateProvider 中 NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(user)));我希望这足以让所有基于授权的组件进行更新。但事实并非如此。我尝试了 StateHasChanged() 方法，但显然它不能像那样工作，因为它只是更新触发它的组件。但是，如果您在登录后手动重新加载页面，一切都会好的。有什么想法可以通过代码更新布局吗？

Answer 1

我不确定您的 MainLayout 的布局，所以让我们假设 AuthorizeView 组件嵌入在 NavMenu 组件中，而 NavMenu 组件本身嵌入 MainLayout 组件中...

您想从登录页面刷新嵌入在 MainLayout 组件中的 NavMenu 组件的内容，对吗？

您可以使用多种方法来实现这一点。以下解决方案基于应用程序状态模式。

首先，我们必须创建一个可以从 NavMenu 组件和 Login 组件访问的服务类。这是类(class):

public class AppState
{
private bool _loggedIn;
public event Action OnChange;
public bool LoggedIn
{
    get { return _loggedIn; }
    set {
        if (_loggedIn != value)
        {
            _loggedIn = value;
            NotifyStateChanged();
        }
    }
 }

 private void NotifyStateChanged() => OnChange?.Invoke();
}

此类定义了一个名为 OnChange 的事件委托(delegate)，它应该封装将刷新 NavMenu 的方法。当 bool 属性 LoggedIn 的值更改时调用此委托(delegate)。 LoggedIn 属性的值可能会在登录页面中发生变化，当用户已登录时，因此该委托(delegate)的任何订阅者(在我们的示例中为 NavMenu)都将收到通知。

登录页面

• @inject AppState AppState注意上面将 AppState 注入(inject)登录页面。放在页面顶部

• AppState.LoggedIn = true; 该代码应放在登录过程的末尾。这将启动 OnChange 委托(delegate)的触发。

导航菜单组件

• @inject AppState AppState
• @implements IDisposable

*

protected override void OnInitialized()
{
    AppState.OnChange += StateHasChanged;
}

public void Dispose()
{
    AppState.OnChange -= StateHasChanged;
}

现在，无论何时您登录，AppState 服务都会通知 NavMenu 组件重新渲染，以便渲染 AuthorizeView 中的 Authorized 的内容。

启动类

services.AddSingleton<AppState>();