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

Question

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

这是我的导航栏菜单

<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']);
    })
  }

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

export class HeaderComponent implements OnInit {

  title = 'Book List App';

  constructor() { }

  ngOnInit() {
  }

}

谢谢。

Answer 1

根据成功返回 bool 值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 中绑定(bind)变量

<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>