在登录页面中隐藏导航栏

Question

我正在使用Angular 6，并尝试在Login组件中隐藏sidenav条。用户登录后，他可以看到导航栏。 （我为此项目创建了伪造的后端，因为这只是我项目的原型。）

我的问题是，我必须刷新才能在应用程序组件上获取sidenav栏。

我知道这是一个小错误，但是有人可以帮我解决这个问题吗？

App.component.ts

---

export class AppComponent implements OnInit, OnDestroy {

  // Translate: Defining Supported Languages
  supportedLangs = [
    { active: false, display: 'EN', value: 'en' },
    { active: true, display: 'DE', value: 'de' },
  ];

  isOpen = false;
  loggedIn: boolean;
  username: string;
  mobileQuery: MediaQueryList;

  // defines if the sidenav should be opened. True in wide screen, false on mobile
  opened = true;
  // can be side or over, for resp wide screen and mobile
  over = 'side';

  watcher: Subscription;

  constructor(private media: ObservableMedia,
    private authenticationService: AuthenticationService,
    private router: Router,
    private sidebarService: SideBarService,
    private translate: TranslateService) {
    this.watcher = media.subscribe((change: MediaChange) => {
      // this language will be used as a fallback when a translation isn't found in the current language
      translate.setDefaultLang('en');
      translate.use('en');
      if (change.mqAlias === 'sm' || change.mqAlias === 'xs') {
        // mobile
        this.opened = false;
        this.over = 'over';
      } else {
        // wide screen
        this.opened = true;
        this.over = 'side';
      }
    });
  }

  // @HostListener('click')
  // click() {
  //   this.sidebarService.toggle();
  // }

  ngOnInit(): void {
    this.browserLanguage();
    // Translate: set default language
    this.translate.use('en');
    this.loggedIn = this.authenticationService.isLoggedIn();
  }

  private browserLanguage() {
    const language = window.navigator.language.toLowerCase();
    if (language.indexOf('de') !== -1) {
      this.translate.use('de');
    }
  }

  // Translate: check if the selected lang is current lang
  isCurrentLang(lang: string) {
    return lang === this.translate.currentLang;
  }

  // Translate: Language Toggler with respect to selected language
  selectLang() {
    for (const lang of this.supportedLangs) {
      lang.active = !lang.active;
      if (lang.active) {
        this.translate.use(lang.value);
      }
    }
  }

  ngOnDestroy(): void {
    this.watcher.unsubscribe();
  }

  logout() {
    this.authenticationService.logout();
    this.router.navigateByUrl('/login');
    this.sidebarService.toggle();
    this.ngOnInit();
  }

}

---

app.component.html

---

<div class="app-container">
  <mat-toolbar class="mat-elevation-z6">
    <button mat-icon-button (click)="snav.toggle()" fxShow.sm="true" fxShow.gt-sm="false">
      <mat-icon>menu</mat-icon>
    </button>
    <a href="/" class="app-name">
      <img class="logo" src="assets/logo.png" alt="">{{ 'owl culture portal' | translate }}</a>
    <span class="fill-remaining-space"></span>
    <div class="toolbar-element clickable" (click)="selectLang()">
      <div class="world-icon">
        <mat-icon>language</mat-icon>
      </div>
      <div class="lang-list">
        <span class="lang" *ngFor="let lang of supportedLangs" [ngClass]="{langActive: isCurrentLang(lang.value)}">
          {{ lang.display }}
        </span>
      </div>
    </div>
    <div class="logout-icon" (click)="logout()" *ngIf="loggedIn">
      <mat-icon>power_settings_new</mat-icon>
    </div>
  </mat-toolbar>

  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav *ngIf="loggedIn" [(mode)]="over" [(opened)]="opened" #snav class="mat-elevation-z2">
      <mat-nav-list>
        <a mat-list-item routerLink="/home">
          <mat-icon>home</mat-icon>{{ 'home' | translate }}
        </a>
        <a mat-list-item routerLink="/events">
          <mat-icon>event_note</mat-icon>{{ 'events' | translate }}
        </a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <app-form-event></app-form-event>
      <!-- the components are rendered here -->
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

---