Início / coding / Perguntas / 79423284
Accepted
Enrico
Asked: 2025-02-08 21:49:48 +0800 CST

MainLayout e modo de renderização da barra lateral no Blazor

  • 772

Meu aplicativo é construído com .NET 8 no Blazor. A configuração no Program.csé assim:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

Quero ter uma barra lateral legal para isso. Criei um SidebarComponentque gera a barra lateral muito bem. Este é o código do componente

@inject NavigationManager _navigationManager
@rendermode InteractiveAuto

<aside id="sidebar" class="sidebar break-point-sm has-bg-image @(_isCollapsed ? "collapsed" : "") @(_isToggled ? "toggled" : "")">
    <a @onclick="BtnCollapseClicked" id="btn-collapse" class="sidebar-collapser"><i class="ri-arrow-left-s-line"></i></a>
    <div class="image-wrapper">
    </div>
    <div class="sidebar-layout">
        <div class="sidebar-header">
            <div class="pro-sidebar-logo">
                <div>P</div>
                <h5>Pro Sidebar</h5>
            </div>
        </div>
        <div class="sidebar-content">
            <nav class="menu open-current-submenu">
                <ul>
                    <li class="menu-header"><span>BLAZOR</span></li>

                    @foreach (var menuItem in standardItems)
                    {
                        <MenuItemComponent MenuItem="@menuItem" MenuItemClickCallback="MenuItemClick" />
                    }
                </ul>
            </nav>
        </div>
    </div>
</aside>

@code {
    private bool _isCollapsed { get; set; } = false;
    private bool _isToggled { get; set; } = false;

    List<MenuItem> standardItems = SidebarData.GetStandardMenuItems();
    List<MenuItem> generalMenuItems = SidebarData.GetGeneralMenuItems();

    public void BtnToggleClicked()
    {
        _isToggled = !_isToggled;
        StateHasChanged();
    }

    public void MouseClickedInOverlay()
    {
        if (_isToggled)
            _isToggled = false;
        generalMenuItems.ForEach(x => x.IsOpened = false);
        StateHasChanged();
    }

   // Omitted
}

Então no MainLayout, eu adicionei

<div class="layout has-sidebar fixed-sidebar fixed-header">
    <SidebarComponent @ref="sideBarComponent"/>

    <div @onclick="@(e => sideBarComponent?.MouseClickedInOverlay())" id="overlay" class="overlay"></div>
    <div class="layout">
    <!-- Omitted -->
    </div>
</div>

Quando o aplicativo inicia, recebo este erro:

System.InvalidCastException: 'Não é possível converter o objeto do tipo 'Microsoft.AspNetCore.Components.Endpoints.SSRRenderModeBoundary' para o tipo 'HypnoPlatform.Client.Pages.Shared.Sidebar.SidebarComponent'.'

insira a descrição da imagem aqui

Como posso chamar métodos de MainLayoutpara SidebarComponent?

c#

1 respostas

  1. Best Answer

    Lembro-me de ter tropeçado nisso antes. Acho que o problema é que a linha:

    <SidebarComponent @ref="sideBarComponent"/>

    está, de forma não intuitiva, tentando atribuir um SSRRenderModeBoundary à variável sideBarComponent, em vez de um SidebarComponent. Algo a ver com o framework envolvendo o componente com SSRRenderModeBounday ao usar InteractiveAuto.

    Nunca cheguei realmente ao fundo da questão, mas usar um serviço compartilhado para comunicar foi minha solução. Algo como:

    public class SidebarStateService
{
    public event Action? OnOverlayClicked;

    public void OverlayClicked()
    {
        OnOverlayClicked?.Invoke();
    }
}

    Em seguida, insira isso no seu MainLayout e na Barra Lateral.

    Chame OverlayClicked do MainLayout e conecte-se ao OnOverlayClicked na sua barra lateral.

    • 1

relate perguntas