Question

我正在制作一个简单的登录注销应用程序。我有一个导航栏组件，我想根据是否登录用户来更新其视图模板。在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
  }

}

和UserService：

@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组件中订阅的可观察对象。现在的问题是，当我使用注销方法注销时，我希望loginStatus（）方法再次发出数据。如何将任何更改检测应用于loginIn属性，以便可观察到的发出数据。如果您知道其他方式，可以建议我。谢谢。

Answer 1

您为什么不使用主题？

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

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

loginStatus.next(this.loggedIn);

每次登录状态更改

如何在属性更改时触发observer.next（）

1 个答案: