时间戳

首页 > 解决方案 > 如何在属性更改时触发observer.next()

angular - 如何在属性更改时触发observer.next()

问题描述

我正在制作一个简单的登录注销应用程序。我有一个导航栏组件，我想根据用户是否登录来更新其视图模板。在 UserService 服务类中，我有注销的方法。我的导航栏组件如下所示：

export class NavbarComponent implements OnInit {
  loginStatus: boolean;
  constructor(private _userService: UserService) { }

  ngOnInit() {
    this._userService.loginStatus().subscribe((data)=>{
      this.loginStatus = data;
      console.log('You are logged in:'+this.loginStatus)
    })
    setTimeout(()=>{
      this._userService.logout();
    }, 10000)// it's just an example for calling logout
  }

}

和用户服务：

@Injectable()
export class UserService {
    private _token: string = null;

    set token(token) {
        localStorage.setItem('token', token);
        this._token = token;
        this.loggedIn = true;
    }
    get token() {
        if (this._token) {
            return this._token;
        }
        return this._token = localStorage.getItem('token');
    }
    private loggedIn: boolean = true;
    constructor(private _httpClient: HttpClient) { }

    logout(){
        console.log('out')
        this._token = null;
        this.loggedIn = false;
        localStorage.removeItem('token');
        localStorage.clear();
    }
    loginStatus(): Observable<boolean>{
        let observable: Observable<boolean> =  new Observable((observer) => {
            observer.next(this.loggedIn);
        })
        return observable;
    }
}

loginStatus() 返回一个我在 Navbar 组件中订阅的 observable。现在的问题是当我使用 logout 方法注销时，我希望 loginStatus() 方法再次发出数据。如何将任何更改检测应用于loggedIn 属性，以便可观察到的发出数据。如果你知道任何其他方式，你可以建议我。谢谢你。

标签： angulartypescriptrxjsobservable

解决方案

为什么不使用主题？

public loginStatus: Subject<boolean> = new Subject<boolean>();

（您也可以使用它的吸气剂将其设为私有......）。你像 observable 一样订阅它，然后执行：

loginStatus.next(this.loggedIn);

每次登录状态改变

推荐阅读