显示或隐藏管理链接

Question

我正在从事angular2项目，我要实现的目标是显示或隐藏管理员链接，这意味着如果我想从管理员角色中删除用户，并且如果我在Firebase数据库中将isAdmin的值更改为false，则不受信任的用户应该在应用程序页面上看不到管理控件。由于是初学者，请向正确的方向引导我。

auth.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import {AppUser} from './models/app-user';
import { UserService } from './user.service';
import {switchMap} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
 user$: Observable<firebase.User>;
  
 constructor
 (private userService:UserService,
 private afAuth: AngularFireAuth, 
 private route: ActivatedRoute) { 
    this.user$ =afAuth.authState;
  }

  login(){
  let returnUrl= this.route.snapshot.queryParamMap.get('returnUrl') || '/';
   localStorage.setItem('returnUrl',returnUrl);
     
  this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }
 
  logout(){
    this.afAuth.auth.signOut();
  }
   get appUser$() : Observable<AppUser>{
   return this.user$.pipe(
    switchMap(user => this.userService.get(user.uid))
    
   }
  }

app.component.ts

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private userService: UserService, private auth: AuthService, router: Router){
    auth.user$.subscribe(user => {
      if (user){
       userService.save(user);
       
        let returnUrl = localStorage.getItem('returnUrl');
        router.navigateByUrl(returnUrl);
      }
    });
  }
}


bs-navbar.component.html

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
  <a class="navbar-brand" routerLink="/">E</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/shopping-cart">Shopping Cart</a>
      </li>
      <ng-template #anonymousUser>
       <li class="nav-item">
          <a class="nav-link" routerLink="/login">Login</a>
       </li> 
      </ng-template>
      <li ngbDropdown *ngIf="appUser; else anonymousUser" class="nav-item dropdown">
        <a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{appUser.name}} 
      </a>
        <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
          <ng-container *ngIf="user.isAdmin">
          <a class="dropdown-item" routerLink="/admin/orders">Manage Orders</a>
          <a class="dropdown-item" routerLink="/admin/products">Manage Products</a>
          </ng-container>          
          
          <a class="dropdown-item"(click)="logout()">Log Out</a> 
        </div>
      </li>
    </ul>
      </div>
</nav>

admin-auth-guard-service.ts

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators'; 

@Injectable({
  providedIn: 'root'
})
export class AdminAuthGuard implements CanActivate {

  constructor(private auth: AuthService, private userService: UserService) { }
 
  canActivate(): Observable<boolean>{
    return this.auth.appUser$
    .map(appUser => appUser.isAdmin);
    }
}