为什么此Angular应用程序在用户登录后无法处理更改显示内容的用户状态(登录\注销)? [英] Why this Angular applications can't handle the user status (logged in\out) changing the displayed content after that the user logged in?

问题描述

我正在使用AngularUI(Angular捆绑软件，此版本)开发Angular应用程序: https://www.npmjs.com/package/firebaseui-angular )处理Firebase上的用户注册\登录

I am working on an Angular application using AngularUI (the Angular bundle, this one: https://www.npmjs.com/package/firebaseui-angular) to handle user registration\login on Firebase

我的应用程序还使用 AnularFire 2 ，在尝试处理用户状态(如果用户已登录或注销)时，我遇到以下问题.

My application also uses AnularFire 2 and I have the following problem trying to handle the user status (if the user is logged in or logged out).

这是我的家庭组件TypeScript代码:

This is my home component TypeScript code:

import { Component, NgZone, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  public loggedIn: boolean = false;

  constructor(public afAuth: AngularFireAuth,
              private router:Router,
              private ngZone: NgZone
             ) { }

  ngOnInit(): void {

    this.afAuth.authState.subscribe(this.firebaseAuthChangeListener);

    
  }
   
  private firebaseAuthChangeListener(response) {
    if (response) {
      this.loggedIn = true;
      console.log('Logged in :) ', this.loggedIn);
    } else {
      this.loggedIn = false;
      console.log('Logged out :( ', this.loggedIn);
    }
  }
}

正如您在此组件中看到的那样，我声明了布尔值 loggedIn ，该变量最初设置为false，在用户执行登录时设置为true(在用户执行日志时再次设置为false)出去).我正在尝试使用此变量在该组件的视图中显示不同的内容.

As you can see in this component I declared the boolean loggedIn variable initially setted as false that I set to true when the user executed the log in (and again to false when the user perform the log out). I am trying to use this variable to show different things into the view of this component.

这是此组件的HTML:

This is the HTML of this component:

<div *ngIf="loggedIn">
    <h1>Logged in</h1>
    <p>TETS</p>
</div>
<div *ngIf="!loggedIn"> 
    <h1>LOGGED OUT</h1>
    <firebase-ui></firebase-ui>
    <p>BLA</p>
</div>

您可以看到，我输入了两个ngIf来检查用户是登录还是注销.如果用户已注销，则会显示Firebase UI界面，以允许执行登录.

As you can se I put two ngIf to check if the user is logged in or loged out. If the user is logged out it is shown the Firebase UI interface in order to allow to perform the log in.

在这里，我得到了一种奇怪的行为.登录到Chrome控制台后，我得到以下输出:

Here I am obtaining a strange behavior. After the log in into the Chrome console I have this output:

Logged in :)  true

表示我正确执行了登录，并且 loggedIn 变量现在为true.

meaning that I correctly performed the log in and that the loggedIn variable is now true.

问题在于，进入我的页面后，我仍然看到 LOGGED OUT (已注销)输出，而不是预期的已登录.因此，此变量的值已更改，但是基于 loggedIn 变量的值的页面内容不会更改.

The problem is that into my page I still see the LOGGED OUT output instead the expected Logged in. So the value of this variable is changed but the page content that is based on the value of the loggedIn variable doesn't change.

怎么了?我想念什么?我该如何解决这个问题?

What is wrong? What am I missing? How can I fix this issue?

推荐答案

JavaScript在功能上具有作用域，因此使用回调将使上下文(此)丢失，但是，您必须绑定当前上下文或使用箭头函数从外部词法环境中正常调用该方法

JavaScript is functionally scoped, thus working with callbacks will make the context (this) lost, However you have to bind the current context or call the method normally from the outer lexical environment using arrow function

将当前上下文绑定到以后要执行的功能:

Bind the current context to the function to be executed later:

ngOnInit(): void {
    this.afAuth.authState.subscribe(this.firebaseAuthChangeListener.bind(this));
}

使用箭头功能:

ngOnInit(): void {
    this.afAuth.authState.subscribe(() => this.firebaseAuthChangeListener());
}

参考

参考

这篇关于为什么此Angular应用程序在用户登录后无法处理更改显示内容的用户状态(登录\注销)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！