加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何在Angular 2中使用getter和setter实现BehaviorSubject

发布时间:2020-12-17 17:51:06 所属栏目:安全 来源:网络整理
导读:我正在尝试在我的LoginService中实现一个类型为BehaviorSubject的isLoggedIn布尔值以及getter和setter函数,以获取值作为Observable /通过其BehaviorSubject正确设置变量.这是有效的,但它在TSLint中引发了两个关于“Type not assignable”和“Dublicate ident
我正在尝试在我的LoginService中实现一个类型为BehaviorSubject的isLoggedIn布尔值以及getter和setter函数,以获取值作为Observable /通过其BehaviorSubject正确设置变量.这是有效的,但它在TSLint中引发了两个关于“Type not assignable”和“Dublicate identifier”的错误.在没有TSLint抱怨的情况下,定义它的正确方法是什么.

这是上述代码的精简版:

@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););
  }
}

解决方法

使用TypeScript getter / setter时,必须重命名属性,因此属性名称应与getters / setters名称不同.

此外,您可以通过将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;
  }

}

并且您将能够收听组件中的更改:

export class App {
  constructor(private loginService: LoginService) {

    loginService.isLoggedIn.subscribe(bool => console.log(bool));

    //Wait and simulate a login
    setTimeout(() => {
      loginService.login();
    },1200);

  }
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读