为什么此 Angular 应用程序无法处理用户登录后更改显示内容的用户状态(已登录 in\out)?
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 包,这个:https://www.npmjs.com/package/firebaseui-angular)开发一个 Angular 应用程序来处理用户 registration\login 在 Firebase 上
我的应用程序也使用 AnularFire 2,我在尝试处理用户状态时遇到以下问题(如果用户已登录或已注销)。
这是我的主页组件 TypeScript 代码:
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用户执行注销)。我正在尝试使用此变量在该组件的视图中显示不同的内容。
这是这个组件的HTML:
<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 界面以允许执行登录。
这里我遇到了一个奇怪的行为。登录 Chrome 控制台后,我得到以下输出:
Logged in :) true
意味着我正确地执行了登录并且 loggedIn 变量现在为真。
问题是在我的页面中我仍然看到 LOGGED OUT 输出而不是预期的 Logged in。因此,此变量的值已更改,但基于 loggedIn 变量值的页面内容不会更改。
怎么了?我错过了什么?我该如何解决这个问题?
JavaScript 在功能范围内,因此使用回调将使 context (this) lost
,
但是,您必须绑定当前上下文或使用箭头函数
从外部词法环境正常调用方法
绑定当前上下文到后面要执行的函数:
ngOnInit(): void {
this.afAuth.authState.subscribe(this.firebaseAuthChangeListener.bind(this));
}
使用箭头函数:
ngOnInit(): void {
this.afAuth.authState.subscribe(() => this.firebaseAuthChangeListener());
}
我正在使用 AngularUI(Angular 包,这个:https://www.npmjs.com/package/firebaseui-angular)开发一个 Angular 应用程序来处理用户 registration\login 在 Firebase 上
我的应用程序也使用 AnularFire 2,我在尝试处理用户状态时遇到以下问题(如果用户已登录或已注销)。
这是我的主页组件 TypeScript 代码:
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用户执行注销)。我正在尝试使用此变量在该组件的视图中显示不同的内容。
这是这个组件的HTML:
<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 界面以允许执行登录。
这里我遇到了一个奇怪的行为。登录 Chrome 控制台后,我得到以下输出:
Logged in :) true
意味着我正确地执行了登录并且 loggedIn 变量现在为真。
问题是在我的页面中我仍然看到 LOGGED OUT 输出而不是预期的 Logged in。因此,此变量的值已更改,但基于 loggedIn 变量值的页面内容不会更改。
怎么了?我错过了什么?我该如何解决这个问题?
JavaScript 在功能范围内,因此使用回调将使 context (this) lost
,
但是,您必须绑定当前上下文或使用箭头函数
绑定当前上下文到后面要执行的函数:
ngOnInit(): void {
this.afAuth.authState.subscribe(this.firebaseAuthChangeListener.bind(this));
}
使用箭头函数:
ngOnInit(): void {
this.afAuth.authState.subscribe(() => this.firebaseAuthChangeListener());
}