如何从登录页面隐藏标题和侧边栏并在登录后显示

Posted 2023-03-05

【中文标题】如何从登录页面隐藏标题和侧边栏并在登录后显示

【英文标题】：How to hide header and sidebar from login page and show it after log-in

【发布时间】：2021-12-01 15:40:07

【问题描述】：

Look at the header and sidebar in this image我想在我的登录页面中隐藏这些，我想在用户登录后显示标题和侧边栏检查标题页面中的条件并检查 app.comp.html 和 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 

【参考方案1】：

你在 app.component.html 中错过了*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>

【讨论】：

如果我这样做，项目不会加载，请给我您的电子邮件先生，让我们在 google meet 中讨论