如何從登錄頁面隱藏標題和側邊欄並在登錄后顯示

Question

查看此圖像中的標題和側邊欄ts 文件，我們可以在那里放置任何條件嗎？ 請檢查代碼並幫我發布解決方案

這是我的 page-header.html

   <mat-drawer-container id="header">
      <div class="page-header">
        <div *ngIf="isUserLoggedIn" fxLayout="row" class="text-white">
          <!-- Menu button -->
          <button mat-stroked-button class="mt-1">
            <mat-icon (click)="openMenu();">menu</mat-icon>
          </button>
          <!-- /Menu button -->
    
          <!-- Side bar -->
          <mat-drawer #sideNav mode="over">
            <div fxLayout="row" class="side-menu-open" *ngIf="stopToggle" (mouseenter)="menuSize()"
              (mouseleave)="menuSqueze()">
              <app-side-bar-navigation [isMenuOpen]="isMenuOpen" [stopToggle]="true" (checkMenu)="checkMenu($event)"></app-side-bar-navigation>
            </div>
            <div fxLayout="row" class="side-menu" *ngIf="!stopToggle">
              <app-side-bar-navigation [isMenuOpen]="isMenuOpen" [stopToggle]="false" (checkMenu)="checkMenu($event)"></app-side-bar-navigation>
            </div>
          </mat-drawer>
          <!-- /Side bar -->
    
          <!-- Close side bar button -->
          <span class="close-arrow">
            <mat-icon *ngIf="!stopToggle && isNav" (click)="closeMenu()">arrow_circle_left</mat-icon>
          </span>
          <!-- /Close side bar button -->
        </div>
      </div>
      <div class="main-page mx-4" [ngClass]="{'main-page-side-bar' : !stopToggle && isNav, 'page-side' : stopToggle}">
        <router-outlet></router-outlet>
      </div>
    
    </mat-drawer-container>

這是我的 page-header.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDrawer } from '@angular/material';
import { Router } from '@angular/router';
import { WEB_MENU_LIST } from '@mulkanoor/constants';
import { UIMenu } from '@mulkanoor/models';
import { fuseAnimations } from '@mulkanoor/modules/sidebar/animations';
import { AuthenticationService } from '@mulkanoor/services';

@Component({
  selector: 'app-page-header',
  templateUrl: './page-header.component.html',
  styleUrls: ['./page-header.component.scss'],
  animations: fuseAnimations
})
export class PageHeaderComponent implements OnInit {
  @ViewChild(MatDrawer, { static: true }) menu: MatDrawer;
  isNav: boolean;
  navigation: UIMenu[];
  isMenuOpen: boolean = false;
  stopToggle: boolean = true;
  isUserLoggedIn: boolean=true;
  isSignin:boolean = true;

  constructor(private authService: AuthenticationService,
    private route: Router) {
    // super();

    this.isUserLoggedIn = this.authService.isUserLoggedIn;
  }

  ngOnInit() {
    this.isNav = true;
    this.menu.open();
    this.navigation = WEB_MENU_LIST;
    this.subscribeToLoginUpdates();
    // this.m();
  }

  checkMenu(type) {
    this.stopToggle = type;
    this.isMenuOpen = type;
  }

  openMenu() {
    this.menu.open();
    this.isNav = true;
    this.isMenuOpen = true;
    this.stopToggle = true;
  }

  closeMenu() {
    this.menu.close();
    this.isNav = false;
  }

  menuSize() {
    this.isMenuOpen = true;
  }

  menuSqueze() {
    this.isMenuOpen = false;
  }

  m(){
    if(this.isUserLoggedIn){
      this.route.navigate(['app/home']);
      this.isNav = true;
      this.menu.open();
    }
    else{
      this.menu.close();
      this.isNav = false;
    }
  }


subscribeToLoginUpdates(): void {
  this.authService.$loginStateChanged
    // .pipe(takeUntil(this.destroyed$))
    .subscribe(e => {
      this.isUserLoggedIn = this.authService.isUserLoggedIn;
      // this.menu.open();
    });
}
}

這是 app.component.html

<main class="overflow-hidden">
  <div class="mc-app">

    <!-- progress-bar -->
    <mc-route-progress-bar></mc-route-progress-bar>
    <!-- / progress-bar -->

    <!-- header -->
    <div class="header">
      <!-- <mc-app-header *ngIf="isUserLoggedIn"></mc-app-header> -->
      <!-- <mc-app-header></mc-app-header> -->
      <app-page-header></app-page-header>
    </div>
    <!-- / header -->

    <!-- content -->
    <div [ngClass] ="{'content' : isUserLoggedIn}" id="mc-content">
      <!-- <router-outlet></router-outlet> -->
    </div>
    <!-- / content -->

    <!-- footer -->
    <div class="footer">
      <!-- <app-footer *ngIf="isUserLoggedIn"></app-footer> -->
      <!-- <app-footer></app-footer> -->
    </div>
  </div>
</main>

app.comp.ts

import { Component, OnInit } from '@angular/core';
import { KalgudiDestroyable } from '@kalgudi/core';
import { AuthenticationService } from './services';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent extends KalgudiDestroyable implements OnInit {
  title = 'mulkanoor-bank';

  isUserLoggedIn: boolean;
  constructor(private authService: AuthenticationService){
    super();

    this.isUserLoggedIn = this.authService.isUserLoggedIn;
  }

  ngOnInit(){
    this.subscribeToLoginUpdates();
  }

  subscribeToLoginUpdates(): void {
    this.authService.$loginStateChanged
      .pipe(takeUntil(this.destroyed$))
      .subscribe(e => {
        this.isUserLoggedIn = this.authService.isUserLoggedIn;
      });
  }
  onDestroyed(): void {}
}

Answer 1

你錯過了*ngIf="isUserLoggedIn"

<main class="overflow-hidden">
  <div class="mc-app">

    <!-- progress-bar -->
    <mc-route-progress-bar></mc-route-progress-bar>
    <!-- / progress-bar -->

    <!-- header -->
    <div class="header" *ngIf="isUserLoggedIn">
      <!-- <mc-app-header *ngIf="isUserLoggedIn"></mc-app-header> -->
      <!-- <mc-app-header></mc-app-header> -->
      <app-page-header></app-page-header>
    </div>
    <!-- / header -->

    <!-- content -->
    <div [ngClass] ="{'content' : isUserLoggedIn}" id="mc-content">
      <!-- <router-outlet></router-outlet> -->
    </div>
    <!-- / content -->

    <!-- footer -->
    <div class="footer">
      <!-- <app-footer *ngIf="isUserLoggedIn"></app-footer> -->
      <!-- <app-footer></app-footer> -->
    </div>
  </div>
</main>