离子4/角度应用中观测值的正确使用方法

Question

因此，有一个简单的应用程序创建的离子/角。

有包含用户电话的app.component.html (菜单)：

<span *ngIf="phone">{{phone}}</span>

和app.component.ts

public phone: string = ''

initializeApp() {
    this.platform.ready().then(() => {
        this.getUser()
    });
}

getUser() {
    if(this.auth.isLoggedIn) {
        this.auth.getUser()
            .subscribe(
                user => {
                    this.phone = user.phone
                }
            )
    }
}

AuthService

public isLoggedIn: boolean = false
public token: string = null


getUser(): Observable<User> {
        const headers = new HttpHeaders({
            'Content-Type': 'application/json',
            'Token': this.token
        })

        return this.http
            .get<User>(this.util.API_URL + '/user', { headers } )
            .pipe(
                map(
                    res => {
                        // api returns json response with 'result' object
                        return res['result']
                    }
                )
            )
    }

问题，我需要在应用程序启动时从app.component.ts调用getUser()方法。如果用户登录了，它现在就可以工作了。但是，当用户未登录时，我需要在成功的用户登录后调用getUser()方法。但我不能在initializeApp()之前从LoginComponent调用LoginComponent，例如。

那么，在AppComponent中显示用户数据的正确方法是什么呢？

Answer 1

auth.service:

export class AuthService {
  private currentTokenSubject = new BehaviorSubject<string>(null); // <-- assign default value here

  constructor(
    private http: HttpClient,
    private storage: Storage,
  ) {
    this.getToken().then(
      res => {
        this.currentTokenSubject.next(res);               // <-- push token to the observable
      }
    );
  }

  async getToken() {
    return await this.storage.get('accessToken');
  }

  public get currentTokenValue(): Observable < string > {
    return this.currentTokenSubject.asObservable();        // <-- return observable here
  }

  login(username: string, password: string) {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': 'Basic ' + btoa(username + ':' + unescape(encodeURIComponent(password)))
    })

    return this.http.post<Token>(`${environment.apiUrl}/auth/signin`, {}, { headers }).pipe(
      map((res: Token) => {
        let token = res.token;
        // store user details and jwt token in local storage to keep user logged in between page refreshes
        this.storage.set('accessToken', token);
        this.currentTokenSubject.next(token);              // <-- also push new token here?
        return token;
      }));
  }

  logout() {
    // remove user from local storage to log user out
    this.storage.remove('accessToken');
    this.currentTokenSubject.next(null);
  }
}