为什么这个 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

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

这是我的主组件 TypeScript 代码:

import { Component, NgZone, OnInit } from '@angular/core';从@angular/fire/auth"导入 { AngularFireAuth }；从@angular/router"导入{路由器}；@成分({选择器:'app-home'，templateUrl: './home.component.html',styleUrls: ['./home.component.scss']})导出类 HomeComponent 实现 OnInit {公共登录:boolean = false;构造函数(公共 afAuth:AngularFireAuth，专用路由器:路由器，私人 ngZone:NgZone) { }ngOnInit(): 无效 {this.afAuth.authState.subscribe(this.firebaseAuthChangeListener);}私人 firebaseAuthChangeListener(响应){如果(响应){this.loggedIn = true;console.log('登录:)', this.loggedIn);} 别的 {this.loggedIn = false;console.log('登出:(', this.loggedIn);}}}

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

这是该组件的 HTML:

<h1>登录</h1><p>TETS</p>
<div *ngIf="!loggedIn"><h1>注销</h1><firebase-ui></firebase-ui><p>BLA</p>

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

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

已登录 :) true

意味着我正确执行了登录并且 loggedIn 变量现在为真.

问题是，在我的页面中，我仍然看到 LOGGED OUT 输出，而不是预期的 Logged in.所以这个变量的值改变了，但基于 loggedIn 变量值的页面内容没有改变.

怎么了?我错过了什么?我该如何解决这个问题?

解决方案

JavaScript 是功能范围的，因此使用回调会使 context (this) 丢失，但是，您必须绑定当前上下文或使用箭头函数从外部词法环境正常调用该方法

将当前上下文绑定到后面要执行的函数:

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

使用箭头函数:

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

参考

参考

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

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

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

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.

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>

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.

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

Logged in :)  true

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

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

using arrow function:

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

Ref

Ref

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