我试图使用角度2中的可观测值来观察一个简单的布尔值loggedin的变化,这个变化可以是真的,也可以是假的。我在TS中发现了这个错误。
类型“boolean”不能分配给类型“subject”。
类型“boolean”不能赋值给类型“observate”。
有人能提供一个替代方案或告诉我我做错了什么吗?
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import {Subject} from "../../node_modules/rxjs/src/Subject";
import {Observable} from "../../node_modules/rxjs/src/Observable";
@Injectable()
export class UserService {
user: Subject<any>;
user$: Observable<any>;
//loggedIn: Subject<any>;
//loggedIn$: Observable<any>;
loggedIn: boolean;
constructor(private http: Http) {
this.user = new Subject();
this.user$ = this.user.asObservable();
this.loggedIn = false;
//this.loggedIn = new Subject();
//this.loggedIn$ = this.user.asObservable();
}
createAccount(user) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.post(
'/api/accounts',
JSON.stringify(user),
{ headers }
)
.map(res => res.json())
.map((res) => {
if (res['success']) {
localStorage.setItem('auth_token', res['auth_token']);
//this.loggedIn$ = true;
//this.loggedIn.next(true);
}
return res['success'];
});
}
login(user) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.post(
'/api/authenticate',
JSON.stringify(user),
{ headers }
)
.map(res => res.json())
.map((res) => {
console.log('Login Result:', res.user);
if (res["success"]) {
localStorage.setItem('jwt', res.token);
//set user service info...
//this.user.next(res.user[0]);
//this.loggedIn.next(true);
}
return res;
});
}
updateAccount(user) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('x-access-token', localStorage.getItem('jwt'));
console.log('PAYLOAD FOR UPDATE USER: ' , user);
return this.http
.put(
'/api/accounts/' + user._id,
JSON.stringify(user),
{ headers }
)
.map(res => res.json())
.map((res) => {
if (res['success']) {
localStorage.setItem('auth_token', res['auth_token']);
//this.loggedIn$ = true;
//this.loggedIn.next(true);
}
return res['success'];
});
}
logout() {
localStorage.removeItem('auth_token');
//this.loggedIn$ = false;
//this.loggedIn.next(false);
}
}
请看被注释掉的行。我需要订阅在任何时候都会返回真或假的可观测数据。
最佳答案
使用主题来发出值。如果希望在订阅时发出状态,但不希望初始状态,请使用private loggedIn: ReplaySubject<boolean> new ReplaySubject(1);
。如果需要初始状态,请使用private loggedIn: BehaviorSubject<boolean> = new BehaviorSubject(false);
。
不要将主题呈现为公共属性-只显示可观察的对象,即loggedIn$: Observable<boolean> = this.loggedIn.asObservable();
。服务的使用者应该只能通过公共方法以受控的方式改变状态。
这些是服务中与登录状态有关的部分。
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class UserService {
private readonly loggedIn: ReplaySubject<boolean> = new ReplaySubject(1);
readonly loggedIn$: Observable<boolean> = this.loggedIn.asObservable();
constructor(private readonly http: HttpClient) {}
login(user): Promise<any> {
return this.http
.post(/* (...) */)
.map((res) => {
if (res["success"]) {
this.loggedIn.next(true);
}
});
}
logout(): void {
this.loggedIn.next(false);
}
}
因此,我们将状态公开为public
Observable<boolean>
属性中的loggedIn$
,而publicObservable
属性只是privateloggedIn
主题属性的loggedIn
接口。通过将值发送到loggedIn$
来改变状态,该值由的订户观察到。