如何在Angular 2中使用getter和setter實現BehaviorSubject

Question

我試圖在我的LoginService中實現一個isLoggedIn類型爲BehaviorSubject的布爾值以及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

當您使用打字稿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); 

    } 
}