时间戳

首页 > 解决方案 > 登录时隐藏可选的导航栏菜单 - Angular 8

html - 登录时隐藏可选的导航栏菜单 - Angular 8

问题描述

登录后，我试图隐藏一些导航栏菜单。

这是我的导航栏菜单

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active"><a class="nav-link" routerLink="books">Books</a></li> 
  <!--Hide this link-->  <li class="nav-item"><a class="nav-link" routerLink="sign-in">Sign In</a></li> 
  <!--Hide this link-->  <li class="nav-item"><a class="nav-link" routerLink="sign-up">Sign Up</a></li> 
  </ul>
</div>

无论如何要隐藏这些我想隐藏的评论链接？这是我的登录组件类型脚本

export class SignInComponent implements OnInit {

  email: string;
  password: string;

  constructor(public auth: AuthService) { }

  ngOnInit() {
  }

  login(){
    this.auth.login(this.email, this.password);
    this.email = this.password = '';
  }

}

验证服务类型脚本

  login(email: string, password: string){
    this.afAuth.auth.signInWithEmailAndPassword(email, password).then(
      value => {
        console.log('Success!', value);
        this.router.navigate(['dashboard']);
      }
    ).catch(err=>{
      console.log('Something went wrong:',err.message);
      this.router.navigate(['sign-up']);
    })
  }

** 如果这有帮助，这是我的标题类型脚本

export class HeaderComponent implements OnInit {

  title = 'Book List App';

  constructor() { }

  ngOnInit() {
  }

}

谢谢你。

标签： htmlangularfirebasefirebase-authenticationangular8

解决方案

根据成功返回布尔值 true/false，

boolean login(email: string, password: string){
    this.afAuth.auth.signInWithEmailAndPassword(email, password).then(
      value => {
        console.log('Success!', value);
        this.router.navigate(['dashboard']);
        return true;
      }
    ).catch(err=>{
      console.log('Something went wrong:',err.message);
      this.router.navigate(['sign-up']);
      return false;
    })
  }

并分配给组件中的一个变量，

this.loggedIn =   this.auth.login(this.email, this.password);;

在 HTML 中绑定变量

<li class="nav-item" *ngIf="loggedIn"><a class="nav-link" routerLink="sign-in">Sign In</a></li> 
<li class="nav-item"  *ngIf="loggedIn"><a class="nav-link" routerLink="sign-up">Sign Up</a></li>

推荐阅读