ionic如何在注销/登录时显示/隐藏内容

Question

在我的ionic应用程序中，注册和登录工作正常，数据保存在Firebase中，但我不知道当用户登录或注销时如何在主页中隐藏或显示内容。

在我的身份验证中。服务ts，用户登录时设置uid（用户ID）

async signIn(email, password){
try{
  let userData = await this.afAuth.auth.signInWithEmailAndPassword( email, password);
  this.uid = this.afAuth.auth.currentUser.uid;
  return { success: true, uid: this.uid, email: email };
}
catch(error){
  return { success: false, error: error.message };
}
}

家页html

<ion-card-content>
sign up here
  <ion-button class="btnSignUp" fill="clear" color="medium" (click)="showSignup()">
      Sign up
  </ion-button>
</ion-card-content>

所以我想在authentication.service.ts中使用该信息，并且仅在用户未登录时在我的home.page.html中显示注册按钮。

Answer 1

在您的主页中。页ts执行以下操作：

export class Home implements OnInit{
  currentUser : any;
  showBtn     : boolean = true;
  constructor(public afAuth: AngularFireAuth) {}

  ngOnInit(){
    this.currentUser = this.afAuth.auth.currentUser;
    if(this.currentUser === null){
     this.showBtn = false;
      }
 }

然后在您的html中：

<ion-card-content *ngIf="showBtn">
sign up here
  <ion-button class="btnSignUp" fill="clear" color="medium" (click)="showSignup()">
  Sign up
 </ion-button>
</ion-card-content>

在这里，您首先检索当前用户，如果用户未登录，则可以将showBtn分配给false，然后在html中使用ngIf来显示/隐藏按钮。