Как использовать наблюдаемые в качестве паба?

Question

Таким образом, у меня есть проблема, когда я хочу использовать localstorage для хранения имени пользователя после его входа в систему. Проблема в том, где я хочу отобразить это имя пользователя, на боковой панели, которая находится в appcomponent.ts

Итак, мне нужен способ обновить appcomponent после входа пользователя (Login.ts находится в другом файле). Я достиг этого, выполнив events.pub/sub, но скоро это станет устаревшим, поэтому я хочу знать, как я могу это сделать с помощью наблюдаемых или ж / д (извините, я все еще новичок в этом)

Как у меня это получилось:

LOGIN.PAGE.TS

   username: string;

   createUser() {
    this.username = localStorage.getItem('username');
    console.log('User created!')
    this.events.publish('user:created', this.username, Date.now());
  }

grabarLocalStorage() {
    console.log('username logeado: ', this.username);
    localStorage.setItem('username', this.username);
  }


 login() {
    this.usuarioLogin = {
      username: this.username,
      password: this.password,
    };
    this.grabarLocalStorage();
    this.createUser();

    this.loginService.postAuthUsuario(this.usuarioLogin)
    .subscribe((data => {  
        this.presentAlert();
        this.router.navigate(['/tabs/tab1']);
      })
}

APP.COMPONENT.TS (Где яу меня боковая панель)

 constructor(
   private platform: Platform,
   private splashScreen: SplashScreen,
   private statusBar: StatusBar,
   public events: Events
 ) {
   this.initializeApp();

   events.subscribe('user:created', (user, time) => {
     // user and time are the same arguments passed in `events.publish(user, time)`
     console.log('Welcome', user, 'at', time);
     this.username = user;
   });
 }

---

Способ, которым я сейчас пытаюсь, который не работает:

LOGIN.PAGE.TS

grabarLocalStorage() {
    console.log('username logeado: ', this.username);
    localStorage.setItem('username', this.username);
  }


 login() {
    this.usuarioLogin = {
      username: this.username,
      password: this.password,
    };
    this.grabarLocalStorage();

    this.loginService.postAuthUsuario(this.usuarioLogin)
    .subscribe((data => {  
        this.presentAlert();
        this.router.navigate(['/tabs/tab1']);
      })
}

LOGIN.SERVICE.TS

getUser(): Observable<any> {
   return new Observable(observer => {
     var username =  localStorage.getItem('username');
     console.log('observable creado');
     observer.next(username); // return username
   });
 }

APP.COMPONENT.TS

constructor(
   private platform: Platform,
   private splashScreen: SplashScreen,
   private statusBar: StatusBar,
   public events: Events,
   private loginService : LoginService
 ) {
   this.initializeApp();

   this.loginService.getUser().subscribe((resp)=>{
     this.username = resp;
     console.log(resp, 'respuesta en app component');
   })
 }