因此,当用户登录时,我正在尝试更新我的菜单。我已经阅读了几个关于类似问题的答案,但我仍然无法让它工作。
NAV-bar.component.html:
<li *ngIf="isLoggedIn"><a routerLink="/" (click)="logout($event);"> {{ logoutLabel }}</a></li>
<li *ngIf="!isLoggedIn"><a routerLink="/login (click)="showPopup($event);">{{ loginLabel }}</a></li>
在 nav-bar.component.ts 中,我使用登录表单打开一个模态,并在 login.service
中查找变量import { SuPopupLoginComponent } from '../shared/su-popup-login/su-popup-login.component';
import { LoginService } from '../login/login.service';
...imports...
@Component({
selector: 'app-nav-bar',
templateUrl: './nav-bar.component.html',
styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {
loginLabel: string;
public isLoggedIn: boolean;
constructor(private loginService: LoginService, private suPopupLoginComponent: SuPopupLoginComponent) {
loginService.getIsLoggedIn.subscribe((bool: boolean) => {
this.isLoggedIn = bool;
console.log('NavBarComponent', this.isLoggedIn);
});
}
showPopup(event) {
event.preventDefault();
this.suPopupLoginComponent.showPopup();
If I call login here It works just as expected
// this.loginService.login('test@test.se', 'Test123')
// .subscribe(
// data => {
// if (data) { // If login was successful data is true.
// let redirect = 'license-overview';
// this.router.navigate([redirect]);
// }
// }
// );
}
logout(event) {
event.preventDefault();
this.loginService.logout();
}
ngOnInit() { }
}
su-popup-login.component.ts - 登录表单并调用登录功能:
import { LoginService } from '../../login/login.service';
import { Injector } from '@angular/core';
@Component({
selector: 'su-popup-login',
templateUrl: './su-popup-login.component.html',
styleUrls: ['./su-popup-login.component.scss'],
providers: [LoginService]
})
export class SuPopupLoginComponent implements OnInit {
constructor(private loginService: LoginService, private injector: Injector) { }
public showPopup() {
Css and showing modal
}
login(event, mail, password) {
this.loginService.login(mail, password)
.subscribe(
data => {
if (data) { // If login was successful data is true.
// Navigate to view after login success.
this.router = this.injector.get(Router);
let redirect = 'license-overview';
this.router.navigate([redirect]);
}
}
);
}
login.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class LoginService {
private isLoggedInSource = new BehaviorSubject<boolean>(localStorage.getItem('currentUser') ? true : false);
public _isLoggedIn: Observable<boolean> = this.isLoggedInSource.asObservable();
constructor(private http: Http) { }
private isLoggedIn(logged: boolean) {
this.isLoggedInSource.next(logged);
}
get getIsLoggedIn() {
return this._isLoggedIn;
}
login = (mail: string, password: string): Observable<boolean> => {
let loginUrl = '/api/authenticate';
let body = JSON.stringify({ mail, password });
return this.http.post(loginUrl, body)
.map((response: Response) => {
let user = response.json();
if (user && user.tokenId) {
this.isLoggedIn(true);
// Add to local storage
localStorage.setItem('currentUser', JSON.stringify({ mail: mail, tokenId: user.tokenId }));
return true; // Login success
}
else {
return false; // Login failed
}
});
}
}
如果我从 nav-bar.component 调用this.loginService.login('user', 'pass')
,它可以正常工作,但是当从 su-popup-login.component.ts 。此外, nav-bar.component.ts 中的this.loginService.logout()
也能正常使用。
订阅调用是否必须与登录/注销调用位于同一组件中?如果是这样,我想我只是不明白Observables是如何运作的。
感谢任何帮助或评论。
答案 0 :(得分:1)
providers: [LoginService]
中的 su-popup-login.component.ts
创建了 LoginService
的不同实例。
要使其有效,您必须确保两个组件共享 LoginService
的单个实例
为避免在 providers: [LoginService]
或 ngModule of appcomponent
中使用 coremodule
,请删除 providers: [LoginService]
su-popup-login.component.ts