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

Question

我正在尝试在我的 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););
  }
}

Answer 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);

  }
}

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

How to implement BehaviorSubject with getter and setter in Angular 2

angular

typescript

getter-setter

tslint

behaviorsubject