如何解决使用rxjs的行为,登录未出现在Angular应用程序的初始呈现中
app.comp.ts
import { Component,OnInit } from '@angular/core';
// import { Observable } from 'rxjs/Observable';
import {LoginAuthService} from '../app/services/login-auth.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Kaksha-UI';
isLogin$: Observable<boolean>
constructor(private authService: LoginAuthService) { }
ngOnInit(): void {
this.isLogin$ = this.authService.isLoggedIn;
// let valueFromSession = sessionStorage.getItem("userLogin");
// if(valueFromSession != undefined){
// this.isLogin = true;
// }
console.log(this.isLogin$);
}
}
app.comp.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Kaksha</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class='nav-item active' >
<a class="nav-link" *ngIf='!isLogin$ | async' [routerLink]='["/login"]'>Login</a>
</li>
<li class='nav-item'>
<a class="nav-link" *ngIf='!isLogin$| async' [routerLink]='["/register"]'>Register</a>
</li>
<li class='nav-item'>
<a class="nav-link" *ngIf='isLogin$ | async' [routerLink]='["/register"]'>Logout</a>
</li>
</ul>
</div>
</nav>
<!-- <h1 *ngIf='isLogin$ | async' >Hello World</h1> -->
<div class="container">
<router-outlet></router-outlet>
</div>
login.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable,BehaviorSubject} from 'rxjs';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class LoginAuthService {
private loginUrl = 'http://localhost:1050/login';
private loggedIn = new BehaviorSubject<boolean>(false);
constructor(private http: HttpClient,private router:Router) { }
get isLoggedIn(){
console.log('I am called');
return this.loggedIn.asObservable();
}
loginUser(userObj){
if(userObj.username != "" && userObj.password != ""){
this.loggedIn.next(true);
this.router.navigate(['/dashboard']);
console.log(this.loggedIn);
}
}
}
在代码的初始呈现中,应显示导航栏中存在的登录/注册按钮,而未呈现。如果在初始渲染中分析了代码,则应显示登录和注册按钮
另外,当我要登录组件并调用registerUser函数时,则导航栏中会出现注销信息
解决方法
在模板中的同一可观察对象上使用多个异步管道被认为是不良做法,并可能导致不良后果。请考虑将列表项放在ng容器中。
<ul class="navbar-nav ml-auto">
<ng-container *ngIf="isLogin$ | async; else unauthorized">
<li class='nav-item'>
<a class="nav-link" [routerLink]='["/register"]'>Logout</a>
</li>
</ng-container>
<ng-template #unauthorized>
<li class='nav-item active'>
<a class="nav-link" [routerLink]='["/login"]'>Login</a>
</li>
<li class='nav-item'>
<a class="nav-link" [routerLink]='["/register"]'>Register</a>
</li>
</ng-template>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。