Angular 带有导航栏的登录页面 - 事件顺序问题

Question

I'm using Angular 9 and I've used the boiler plate sidenav Angular Material template. I'm forcing the sidenav to be open all the time when in larger size screens and a hamburger icon when in smaller sizes.

During the login process, when a user isn't authenticated, the sidenav and hamburger icon are hidden with an *ngIf. I also use a template ref variable #drawer on the sidenav container to be referenced by the hamburger icon (click)="drawer.toggle()"

The problem I believe is because I'm not showing these items before a login happens, the template ref variable never gets set at the outset of the component creation. So, when I try to use the hamburger icon to toggle the sidenav I get a don't understand toggle of undefined error.

My login component is being shown in a router outlet so it has to stay in this config. Ideally I'd show a login component first, then go to the app when a user is logged in, but I'm not sure how to do that. Looking for a little guidance on this issue if anyone can help.

Thanks so much

---- NAVIGATION COMPONENT ----

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav *ngIf="securityObject.isAuthenticated" #drawer class="sidenav" fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'" [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <!-- SIDEBAR NAVIGATION CONTENT -->
    <mat-nav-list>
      <a mat-list-item routerLink="/users" routerLinkActive="active">
        <mat-icon matListIcon>people</mat-icon>Users
      </a>
      <a mat-list-item routerLink="/clients" routerLinkActive="active">
        <mat-icon matListIcon>business</mat-icon>Clients
      </a>
      <a mat-list-item routerLink="/documents" routerLinkActive="active">
        <mat-icon matListIcon>folder</mat-icon>Documents
      </a>
      <a mat-list-item routerLink="/projects" routerLinkActive="active">
        <mat-icon matListIcon>apps</mat-icon>Projects
      </a>
      <a mat-list-item routerLink="/facility" routerLinkActive="active">
        <mat-icon matListIcon>storefront</mat-icon>Facility
      </a>
      <a mat-list-item routerLink="/tools" routerLinkActive="active">
        <mat-icon matListIcon>build</mat-icon>Tools
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <ng-container *ngIf="securityObject.isAuthenticated">
        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
          *ngIf="(isHandset | async)!.matches">
          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
      </ng-container>
      <span>WWP&S Portal</span>
      <span class="example-fill-remaining-space"></span>
      <span><a routerLink="/logout" (click)="logout()" *ngIf="securityObject.isAuthenticated">
          {{ this.securityService.securityObject.username }}</a></span>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

--- NAVIGATION TS FILE ---

import { Component, OnInit, ViewChild } from "@angular/core";
import { Observable } from "rxjs";
import {
  BreakpointState,
  BreakpointObserver,
  Breakpoints,
} from "@angular/cdk/layout";
import { SecurityService } from "../../services/security.service";
import { UserAuth } from "../../models/user-auth";

@Component({
  selector: "app-navigation",
  templateUrl: "./navigation.component.html",
  styleUrls: ["./navigation.component.css"],
})
export class NavigationComponent implements OnInit {
  drawer;
  securityObject: UserAuth = null;
  isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(
    Breakpoints.Handset
  );
  constructor(
    private breakpointObserver: BreakpointObserver,
    public securityService: SecurityService
  ) {}

  ngOnInit() {
    this.securityObject = this.securityService.securityObject;
  }

  logout(): void {
    this.securityService.logout();
  }
}

Answer 1

Try removing drawer property from your typescript code please.