Angular ngIf firebase 身份验证指令使 DOM 无响应

Posted 2023-02-23

【中文标题】Angular ngIf firebase 身份验证指令使 DOM 无响应

【英文标题】：Angular ngIf firebase authentication directive makes DOM unresponsive

【发布时间】：2018-10-22 20:21:41

【问题描述】：

我正在使用 Angular 的 *ngIf 指令来检查用户当前是否已登录。根据用户的身份验证状态（我正在使用 Firebase 身份验证），应该显示登录按钮或用户菜单。代码如下：

.html

<div class="right-side">
    <!-- Header Widget -->
    <div class="header-widget">

    <!-- User Menu -->
    <div class="user-menu" *ngIf="afAuth.authState | async as user; else showLogin">
        <div class="user-name"><span><img src="assets/images/agent-03.jpg" ></span>Hi,  ... !</div>
        <ul>
            <li><a routerLink="my/profile"><i class="sl sl-icon-user"></i> My Profile</a></li>
            <li><a routerLink="my/bookmarks"><i class="sl sl-icon-star"></i> Bookmarks</a></li>
            <li><a routerLink="my/properties"><i class="sl sl-icon-docs"></i> My Properties</a></li>
            <li (click)="logOut()"><a routerLink="/"><i class="sl sl-icon-power"></i> Log Out</a></li>
        </ul>
    </div>

    <ng-template #showLogin>
        <a routerLink="/login-register" class="sign-in"><i class="fa fa-user"></i> Log In / Register</a>
    </ng-template>

    <a routerLink="/submit-property" class="button border">Submit Property</a>
    </div>
    <!-- Header Widget / End -->
</div>

.ts

import  AngularFireAuth  from 'angularfire2/auth';
// ...
@Component(
  // ...
)
export class AppComponent 
  constructor(public afAuth: AngularFireAuth) 
  

点击后，用户菜单应弹出并显示链接列表。但是，单击时没有响应。This is the template I'm using。这是菜单 ul 的 .css 代码：

.css

.user-menu ul 
    float: left;
    text-align: left;
    position: absolute;
    top: 45px;
    right: 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
    border-radius: 4px;
    display: inline-block;
    width: 190px;
    font-size: 15px;
    transform: translate3d(0,15px,0);
    padding: 16px 8px;
    box-sizing: border-box;
    transition: 0.25s;
    visibility: hidden;
    opacity: 0;
    z-index: 110;

如果我像 <div class="user-menu" *ngIf="1==1; else showLogin"> 那样替换 *ngIf 指令中的代码，则 DOM 会响应：

但是当我监控用户的身份验证状态*ngIf="afAuth.authState | async as user; else showLogin" 时，它一直没有响应。

如何解决？

【问题讨论】：

尝试将构造函数更改为：user: Observable;构造函数（公共 afAuth：AngularFireAuth） this.user = afAuth.authState; 然后保持在 html 上， *ngIf="user | async; else showLogin"

代码看起来没问题。您确定 firebase 设置没有问题吗？

【参考方案1】：

将此行添加到类中

user$: Observable<firebase.user>;
    constructor(private afAuth: AngularFireAuth)
    this.user$ = afAuth.authState
    

在HTML里面写

<div *ngIf="user$ | async as user; else showLogin">