Как обмениваться данными между службами и компонентами angular?

Я предполагаю, что из вашего тега вы используете Ionic framework? Можно ли это сделать с помощью событий?

    // first page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.info('User created!')
  this.events.publish('user:created', user, Date.now());
}


// second page (listen for the user created event after function is called)
constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in `events.publish(user, time)`
    console.info('Welcome', user, 'at', time);
  });
}

Пример кода взят из: https://ionicframework.com/docs/v3/api/util/Events/

Я бы рекомендовал использовать BehaviorSubject. Это Observable, поэтому вы можете подписаться на него, но вы также можете контролировать, когда он выдает новые значения, вызывая behaviorSubject.next(newValue). При создании BehaviorSubject вы должны передать ему начальное значение. В вашем случае это false.

@Injectable()
export class Authentication {

  isAuthenticated = new BehaviorSubject<boolean>(false);

  login() {
    localStorage.setItem('access_token', 'true');
    this.isAuthenticated.next(true);
  }

}

-

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private isAuthenticated:boolean;

  constructor(public authService: Authentication) { 
   this.authService.isAuthenticated
    .subscribe(isAuthenticated => this.isAuthenticated = isAuthenticated)
  }

}

или вы можете подписаться в html с помощью Async Pipe

export class HomePage {

  private isAuthenticated: BehaviorSubject<boolean>;

  constructor(public authService: Authentication) { 
   this.isAuthenticated = this.authService.isAuthenticated;
  }

}

-

<div *ngIf = "isAuthenticated | async">Authentication view</div>
<div *ngIf = "!(isAuthenticated | async)">Unauthentication view</div>

В отличие от обычного Observable, когда вы вызываете subscribe для BehaviorSubject, функция, которую вы передали в качестве аргумента для подписки, будет немедленно выполнена. Это связано с тем, что BehaviorSubject всегда имеет значение. Вы можете получить к нему доступ с помощью this.authService.isAuthenticated.value, но здесь это не очень полезно.

Используйте RXJS. Использование BehaviourSubjects позволяет вам передавать состояние и подписываться на изменения состояния в нескольких компонентах, которые внедряют службу и имеют начальное состояние. При определении BehaviourSubject вы также должны определить начальное значение, которое здесь равно false. Все, что вам нужно сделать, это вызвать .next(true) в BehaviourSubject для отправки состояния, как показано ниже:

...
@Injectable()
export class Authentication {

  private _isAuthenticated: BehaviourSubject<boolean> = new BehaviourSubject(false);

  public get isAuthenticated(): Observable<boolean> {
    return this._isAuthenticated.asObservable();
  }

  login() {
    localStorage.setItem('access_token', 'true');
    this._isAuthenticated.next(true);
  }
}

Использование метода get в вашей службе позволяет вам возвращать наблюдаемое без публичного раскрытия методов BehaviourSubject.

Затем в вашем компоненте:

...
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
  private isAuthenticated:boolean = false;
  private readonly _authService: Authentication;
  constructor(authService: Authentication) {
    this._authService = authService;
  }

  public ngOnInit(): void {
   this._authService.isAuthenticated
     .subscribe((isAuthenticated) => this.isAuthenticated = isAuthenticated)
  }
}

На данный момент я использую это решение:

import { DoCheck } from '@angular/core';

//...

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private isAuthenticated:boolean = false;
  constructor(public authService: Authentication) { }

  ngDoCheck() {
      if (this.authService.isAuthenticated)) {
        //..if authenticated do this
      } else {
        //..if not do this
      }
  }
}

Даже если я не уверен, что это хороший способ.