無法使用 angular 從登錄頁面隱藏 header 和頁腳

Question

在這里我的問題是我無法從登錄頁面隱藏 header 和頁腳。 在這里，我在 app.html 和登錄頁面和主頁中有一個常見的 header 和頁腳。 沒有登錄它不必顯示導航但我仍然在身份驗證之前獲得導航

下面是我的代碼

<nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">

            <ul class="nav navbar-nav navbar-right landing-nav-text ul-right">
                <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#info">info</a></li>
                <li><a href="#demo">Demo</a></li>
                 <li><a href="#demo1">Demo1</a></li>
                  <li><a href="#demo2">Demo2</a></li>
                   <li><a href="#demo3">Demo3</a></li>
            </ul>
        </div>
    </div>
     <a (click)="Logout()" class="logout">
        Logout
    </a>
</nav>
<router-outlet><router-outlet>


<div class="footer">
    <div class="main_content">

        <div class="footer_links_end">
          <p>This is footer</p>

            <p>
                <a href="https://twitter.com">Twitter</a>
                <a href="https://www.linkedin.com">Linkedin</a>

            </p>
        </div>

    </div>
</div>

請檢查此堆棧是否有問題

Answer 1

使用ngIf ：

為此，您必須使用@ angular / router中的Router 。

Component.ts：

import { Router }  from "@angular/router";
...

constructor(public router: Router){} // note you have to use Public because you are using it in html file too.

Component.html：

<nav *ngIf="router.url !== '/login' && router.url !== '/signup'"> // or maybe only 'login'
</nav>

注意：如果您對標題（ <app-header> ）和頁腳（ <app-footer> ）使用不同的組件，則也可以對它們使用* ngIf。

Answer 2

2項更改可以幫助您實現這一目標...

• 從您的服務調用getUser之后設置的布爾標志...如果是有效用戶，我們將boolean設置為true並顯示導航
• 在HTML中，我們只需針對此布爾變量設置ngIf

 /* APP.COMPONENT.TS */ hideName:boolean =true; constructor(public _authService:AuthService,public router:Router){ if(this._authService.getUser() == ''){ this.hideName = false; } else { this.hideName =true; } } 

  <!-- Added *ngIf="hideName" to app.component.html --> <nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey" *ngIf="hideName"> 

Answer 3

因為在app.component.html（用於顯示插座的頁面）中，您將直接插入代碼：

< Your header code >

....

<router-outlet></router-outlet>

....

< Your footer code >

解決方案是：

• 將頁眉和頁腳代碼刪除到一個單獨的組件，如HeaderComponent和FooterComponent，然后，
• 通過使用適當的選擇器，僅在您要顯示的頁面上呼叫插座。

例如： https : //stackblitz.com/edit/angular-uhvgjm （我已經做了一些工作，當您想要顯示頁眉和頁腳時，需要繼續進行操作）

Answer 4

您可以使用帶有主題的可注射 class 並將您需要的任何內容從您想要的任何事件推送到 header

import {EventEmitter, Injectable} from '@angular/core';
import {Subject, Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderManagerService {
  private headerStatus = new Subject<any>();

  constructor() {
  }

  changeHeader(showHeader: boolean, rightBtn: string | undefined, onRightBtn: EventEmitter<boolean> | undefined, onLeftBtn: EventEmitter<boolean> | undefined) {
    this.headerStatus.next({showHeader, rightBtn, onRightBtn, onLeftBtn});
  }

  getHeaderStatus(): Observable<any> {
    return this.headerStatus.asObservable();
  }
}

在你的 NavComponent

  protected onDestroy = new Subject<void>();
  showHeader = true;
  rightBtn: string | undefined;
  onRightBtn: EventEmitter<boolean> | undefined;
  onLeftBtn: EventEmitter<boolean> | undefined;

  constructor(private headerManager: HeaderManagerService,
              private router: Router) {
  }

  ngOnDestroy(): void {
    this.onDestroy.next();
    this.onDestroy.complete();
  }

  ngOnInit(): void {
    this.router.events
      .pipe(filter(navigation => navigation instanceof NavigationEnd))
      .subscribe((s: any) => {
        this.showHeader = true;
        this.rightBtn = undefined;
        this.onRightBtn = undefined;
        this.onLeftBtn = undefined;
      });
    this.headerManager.getHeaderStatus()
      .pipe(
        skipWhile(val => !val),
        takeUntil(this.onDestroy)
      )
      .subscribe(({showHeader, rightBtn, onRightBtn, onLeftBtn}) => {
        this.showHeader = showHeader;
        this.rightBtn = rightBtn;
        this.onRightBtn = onRightBtn;
        this.onLeftBtn = onLeftBtn;
      });
  }

在 nav.component.html

<nav *ngIf="showHeader">
  some header
</nav>
<nav *ngIf="!showHeader">  <!--or ignore this element-->
  <div class="d-flex">
    <button (click)="onLeftBtn?.emit(true)">back</button>
    <div class="flex-grow-1"></div>
    <div (click)="onRightBtn?.emit(true)" [innerHTML]="rightBtn ?? ''"></div>
  </div>
</nav>

並從您的頁面推送一些更改到 header

  constructor(private headerManager: HeaderManagerService) {
  }
  onLeftBtn = new EventEmitter<boolean>();
  onRightBtn = new EventEmitter<boolean>();
  ngOnInit(): void {
    this.headerManager.changeHeader(false,
      '<img class="word-arrow mb-4" src="assets/img/myimage.jpg">',
      this.onRightBtn,
      this.onLeftBtn);
    this.onLeftBtn.subscribe((value) => {
      console.log('onLeftBtn');
    });
    this.onRightBtn.subscribe((value) => {
      console.log('onRightBtn');
    });
  }