Как реализовать BehaviorSubject с геттером и сеттером в Angular 2

Я пытаюсь реализовать в моем LoginService isLoggedIn логическое значение типа BehaviorSubject вместе с функциями getter и setter, чтобы получить значение в виде наблюдаемой / правильно установить переменную через ее BehaviorSubject. Это работает, однако он выдает две ошибки в 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););
  }
}
1 2
typescript getter-setter tslint

1 ответ:

При использовании 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);

  }
}
5