[英]How to implement BehaviorSubject with getter and setter in Angular 2
I'm trying to implement in my LoginService a isLoggedIn
boolean value of type BehaviorSubject
together with getter and setter functions to get the value as an Observable / set the variable correctly via its BehaviorSubject. 我正在尝试在我的LoginService中实现一个类型为
BehaviorSubject
的isLoggedIn
布尔值以及getter和setter函数,以获取值作为Observable /通过其BehaviorSubject正确设置变量。 This is working, however it throws two errors in TSLint about "Type not assignable" and "Dublicate identifier". 这是有效的,但它在TSLint中引发了两个关于“Type not assignable”和“Dublicate identifier”的错误。 What would be the right way to define it without TSLint complaining about.
在没有TSLint抱怨的情况下,定义它的正确方法是什么。
This is a stripped down version of the above mentioned code: 这是上述代码的精简版:
@Injectable()
export class LoginService {
public isLoggedInSource = new BehaviorSubject<boolean>(false);
public isLoggedIn: Observable<boolean> = this.isLoggedInSource.asObservable(); // Duplicate identifier 'isLoggedIn'.
constructor(private http: Http) {}
set isLoggedIn(logged): void { // Duplicate identifier 'isLoggedIn'.
this.isLoggedInSource.next(logged);
}
get isLoggedIn(): Observable<boolean> { // Duplicate identifier 'isLoggedIn'.
return this.isLoggedInSource.asObservable();
}
logout() {
this.isLoggedIn = false; // Type 'boolean' is not assignable to type 'Observable<boolean>'.
}
login(body) {
return this.http.post('/login', body)
.map(res => {
if (res.token) {
this.isLoggedIn = true; // Type 'boolean' is not assignable to type 'Observable<boolean>'.
}
return res;
})
.catch(err => Observable.throw(err););
}
}
When you use TypeScript getter/setter
, you have to rename your property, so the property name should be different from getters/setters
name. 使用TypeScript
getter/setter
,必须重命名属性,因此属性名称应与getters/setters
名称不同。
Moreover, you can modify your code by setting your behaviorSubject
as a private member of your service, and just expose your Observable
. 此外,您可以通过将
behaviorSubject
设置为服务的私有成员来修改代码,并公开您的Observable
。
@Injectable()
export class LoginService {
private isLoggedInSource = new BehaviorSubject<boolean>(false);
public _isLoggedIn: Observable<boolean> = this.isLoggedInSource.asObservable();
constructor() {}
set isLoggedIn(logged: boolean) {
this.isLoggedInSource.next(logged);
}
get isLoggedIn() {
return this._isLoggedIn;
}
logout() {
this.isLoggedIn = false;
}
login() {
this.isLoggedIn = true;
}
}
And you will be able to listen change in your component : 并且您将能够收听组件中的更改:
export class App {
constructor(private loginService: LoginService) {
loginService.isLoggedIn.subscribe(bool => console.log(bool));
//Wait and simulate a login
setTimeout(() => {
loginService.login();
}, 1200);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.