Angular中隐藏Toolbar导致Login组件样式异常求助

Hey there! Let's break down why your Login component's style is acting up after adding the toolbar visibility logic, and how to fix it for good.

The Root Cause #

Right now, you're only applying *ngIf="currentUser" to the <mat-toolbar> element. That means even when there's no logged-in user, the <mat-sidenav-container> and its wrapping div are still present in the DOM. This container comes with styles like fxFlexFill and the container class, which enforce flex layout rules and add unintended spacing/constraints to your Login component. Your Login page ends up inheriting these layout styles, throwing off its original design.

The Solution: Conditionally Render the Entire Toolbar Layout #

Instead of hiding just the toolbar, we'll hide the entire toolbar-related structure (toolbar + sidenav container) when there's no currentUser. This way, your Login component renders directly without being wrapped in the sidenav container's interfering styles.

Here's the revised toolbar-menu.component.html:

<!-- Show toolbar and sidenav layout only when currentUser exists -->
<ng-container *ngIf="currentUser; else noUserLayout">
  <div>
    <mat-toolbar color="accent">
      <div fxShow="true" fxHide.gt-sm="true">
        <button mat-icon-button (click)="sidenav.toggle()">
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <img fxShow="false" fxHide.gt-sm="true" class="iconLogo" style="width: 5%;" src="../../../../assets/LogoCedupBranca-02.png" alt="Logo">
      <a mat-button class="companyName" routerLink="/pages/home">
        <span>Cooper Cedup</span>
      </a>
      <span class="spacer"></span>
      <div class="panel-open" fxShow="true" fxHide.lt-md="true">
        <a mat-button routerLink="/pages/students">Alunos</a>
        <a mat-button routerLink="/pages/accountability">Prestação de Contas</a>
        <a mat-button routerLink="/pages/bills">Boletos</a>
        <a mat-button routerLink="/pages/charts">Gráficos</a>
        <button (click)="encerrarSessao()" class="exitButton" mat-icon-button aria-label="Example icon-button with a heart icon">
          <mat-icon>exit_to_app</mat-icon>
        </button>
      </div>
    </mat-toolbar>
    <mat-sidenav-container color="primary" fxFlexFill class="container" >
      <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
        <div fxLayout="column">
          <a mat-button routerLink="/pages/students" (click)="sidenav.close()" >Alunos</a>
          <a mat-button routerLink="/pages/accountability" (click)="sidenav.close()">Prestação de Contas</a>
          <a mat-button routerLink="/pages/bills" (click)="sidenav.close()">Boletos</a>
          <a mat-button routerLink="/pages/charts" (click)="sidenav.close()">Gráficos</a>
          <a mat-raised-button color="warn" routerLink="/login" (click)="encerrarSessao()">Logout</a>
        </div>
      </mat-sidenav>
      <mat-sidenav-content fxFlexFill>
        <ng-content></ng-content>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>
</ng-container>

<!-- Render content directly when no currentUser -->
<ng-template #noUserLayout>
  <ng-content></ng-content>
</ng-template>

Why This Works #

• When currentUser exists: The full toolbar and sidenav layout loads, and your authenticated pages are wrapped in the sidenav content as intended.
• When currentUser doesn't exist: The entire toolbar layout is removed from the DOM, so your Login component renders directly as a top-level element in app.component.html. This preserves its original styling without any interference from the toolbar's layout containers.

Quick Post-Fix Checks #

After updating the code, confirm:

1. The toolbar hides properly when not logged in.
2. The Login component matches your expected design.
3. Authenticated pages still function correctly with the toolbar and sidenav.

内容的提问来源于stack exchange，提问作者L1mit