我正在使用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" alt=""></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.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;
}
如果我替换* ngIf指令中的代码,如此< div class =“user-menu”* ngIf =“1 == 1; else showLogin”>,则DOM响应：
但是,当我监视用户的身份验证状态* ngIf =“afAuth.authState | async as user; else showLogin”时,它会保持无响应状态.
怎么解决这个问题？
解决方法
将此行添加到类中
user$: Observable<firebase.user>;
constructor(private afAuth: AngularFireAuth){
this.user$= afAuth.authState
}
在HTML写入内部
<div *ngIf="user$| async as user; else showLogin">
