我目前面临的问题是,在功能上,当用户登录时,我的导航栏不会自动更新以向他们显示正确的链接。只有当我手动刷新不需要的页面时它才会更新,因为这是单页面应用程序。我可以处理退出确定,因为注销按钮和功能位于控制导航栏的组件内。但是,登录是通过auth服务控制的,对我的组件不可见。我尝试将isLoggedIn
布尔公共,然后将组件导入到auth服务中,并在登录时将值设置为true,但这会产生非描述性的zone.js错误。请参阅下文 - 所有帮助表示赞赏。
app.component
控制我的导航栏:
export class AppComponent implements OnInit{
private isLoggedIn: boolean;
constructor(private router: Router, private authenticationService: AuthenticationService) { }
ngOnInit() {
this.isLoggedIn = this.authenticationService.isLoggedIn();
}
logout() {
this.isLoggedIn = false;
this.authenticationService.logout();
this.router.navigate([""]);
}
title = 'MYlestone';
}
和app.component
模板:
<div class="site-container">
<nav class="navbar navbar-toggleable-md">
<div *ngIf="isLoggedIn">
<span class="navbar-brand text-color">MYlestone</span>
</div>
<div *ngIf="!isLoggedIn">
<span class="navbar-brand text-color" [routerLink]="['']" style="cursor:pointer">MYlestone</span>
</div>
<div>
<div class="navbar-nav" *ngIf="isLoggedIn">
<a class="nav-item nav-link" href="#" [routerLink]="['content']">My Content</a>
<a class="nav-item nav-link" href="#" [routerLink]="['about']">About</a>
<div class="ml-auto">
<a class="nav-item nav-link" href="#" (click)="logout()">Logout</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid text-color">
<!-- let client side routing take over, see app.routing.ts -->
<router-outlet></router-outlet>
</div>
</div>
如您所见,isLoggedIn
在ngOnInit方法中设置[正确],并且在单击注销按钮时我的组件会相应更新。我努力弄清楚的是当用户登录时,如果在执行此组件的ngOnInit方法之后发生了更新此组件中的isLoggedIn
布尔值。如果需要/需要,您可以在下面找到负责实际登录用户的authentication.service:
@Injectable()
export class AuthenticationService {
constructor(private http: Http) { }
login(email: string, password: string) {
return this.http.post('http://localhost:36000/api/accounts/authenticate', { email: email, password: password })
.map((response: Response) => {
let user = response.json();
if (user && user.token) {
localStorage.setItem('currentUser', JSON.stringify(user));
}
});
}
logout() {
localStorage.removeItem('currentUser');
}
isLoggedIn() {
//check to see if token exists
if (localStorage.getItem('currentUser')) {
return true;
}
else {
return false;
}
}
}
答案 0 :(得分:2)
在组件类中,您可以使isLoggedIn
属性从服务获取当前值。 Angular的更改检测机制将在适当时访问它并更新呈现的HTML。
public get isLoggedIn(): boolean {
return this.authenticationService.isLoggedIn();
}
答案 1 :(得分:1)
您应该将isLoggedIn()
的定义从函数移动到组件可以订阅的Observable,并在需要时进行更新。这只是一种可能的解决方案,有很多方法可以解决这个问题。
<强> Service.ts 强>
private isLoggedIn$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
// Sets up the isLoggedIn Observable
getLoggedInStatus(): Observable<boolean> {
return this.isLoggedIn$.asObservable();
}
// Updates the Behavior Subject
updateLoggedInStatus(LoggedIn: boolean): void {
this.isLoggedIn$.next(LoggedIn);
}
<强> Component.ts 强>
constructor(
private _Service: Service
)
ngOnInit() {
this._Service.getLoggedInStatus().subscribe(_isLoggedIn => {
this.isLoggedIn = _isLoggedIn;
}
}