我有一个结帐页面,用户必须先登录才能继续。用户已经可以登录。在每种情况下,我都想在组件检测到用户是否登录时显示一个微调器。
check-out.html 代码如下所示:
<div *ngIf="showSpinner">
<app-spinner></app-spinner>
</div>
<div *ngIf="auth.user | async; then authenticated else guest">
<!-- template will replace this div -->
</div>
<!-- User NOT logged in -->
<ng-template #guest>
<div *ngIf="auth.user == null" class="call-to-action">
login buttons...
</div>
</ng-template>
<!-- User logged in -->
<ng-template #authenticated>
payment staps
</ng-template>
我的签出组件看起来像:
export class CheckoutComponent implements OnInit {
private showSpinner = true;
constructor(public auth: AuthService,
private router: Router) {
}
ngOnInit() {
this.auth.user.subscribe(user => {
this.showSpinner = false;
});
}
...
但是总是显示(和),但我只想加载微调器,然后加载#guest 或#authenticated。如何实现?
如果搜索了很多,但发现 ngIf 只能采用 if-else 构造。