Angular2: как при авторизации обновить header.component?

Антон, спасибо за помощь, понимаю, что утомил, но может еще кто-нибудь ответит
Последняя версия сейчас такая:

user.service

export class User {
    login: boolean;
}

@Injectable()
export class UserService {

    isAuthenticated$ = new ReplaySubject(1);
  
    constructor(private http: HttpClient) { }
     
    getUser() {
        return this.http.get<User>('/server/api/userService').pipe(
          tap(data => this.isAuthenticated$.next(!!data['login'])),
        );
    }

сервер возвращает {"login": true} или {"login": false}

header.component.ts

export class HeaderComponent implements OnInit {

      user$: Observable<User>;
      //user$: Observable<any>;
      //isAuthenticated$: Observable<boolean>; // Чтобы отключить ошибку
      isAuthenticated$: Observable<any>;
      
      constructor(private userService: UserService) { }

        ngOnInit() {
          this.user$ = this.userService.getUser();
          this.isAuthenticated$ = this.userService.isAuthenticated$;
       }
}

header.component.html
{{this.isAuthenticated$ | async }} так ничего не отображается
{{this.isAuthenticated$ | async | json }} так показывает NULL
{{this.isAuthenticated$ | json }} так { "_isScalar": false, "observers": [], "closed": false, "isStopped": false, "hasError": false, "thrownError": null, "_events": [], " с пустым _events

А вообще я думал использовать как-то так: *ngIf="this.isAuthenticated$"
Уже почти отчаялся и на грани использования document.location.href
В инете находил простой пример взаимодействия между компонентами, но там один из них должен быть дочерним

И возможно я упускаю из виду какую то очевидную мелочь, которая не стоит упоминаний. Например, помимо хеадера, не должно ли быть кода в компонентах страниц, на которые пользователь попадает после авторизации, чтобы послать сигнал хедеру

Angular2: как при авторизации обновить header.component?

Я с ангуляром как мартышка и очки
Пробую все подряд в компоненте хеадер:

ngOnInit() {
        this.user$ = this.userService.getUser();
        this.isAuthenticated$ = this.userService.isAuthenticated$;
        //console.log(this.isAuthenticated$);
        //this.isAuthenticated$.subscribe(v => console.log(v))
        this.isAuthenticated$.subscribe((data: any) => {
            this.user$ = data;
            console.log(this.user$);
          }
        )

        this.userService.getUser().subscribe((data: any) => {
          this.user$ = data;
            console.log(this.user$);
        });
     }

В консоли вижу:

true
{login: true}

При авторизации / выходе и перенаправлении на целевую страницу эти данные не изменяются пока не перезагружу все приложение

Angular2: как при авторизации обновить header.component?

Спасибо за код, дело сдвинулось с мертвой точки. Записываю в компоненте хеадера console.log(this.isAuthenticated$). Теперь я вижу в консоли массив ReplaySubject с массивом _events и правильные значения: truе или false в зависимости от авторизации. Но опять же, эти значения меняются, только если перезагрузить страницу. Может это правильное поведение. Тогда мне надо проверить это, добавив условие *ngif в шаблон. Но что-то я вытащить не могу значение. Пробую нечто вроде этого, но не выходит console.log(this.isAuthenticated$._events[0]).

Почему дублируются комментарии php?

Если записывается последний коммент, то получается браузер отправляет форму повторно. Получается php тут не причем.

Angular: как получить данные от апи и объявить переменные глобально?

Вот мне и надо просто запубличить выдачу от апи. Все понимают что там 2 строчки в нужном месте, но на трех форумах ответить не могут
При загрузке страницы надо обратится к серверу, забрать данные пользователя. Потом выводить их в шаблоне любого компонента
Серверу при этом ничего передавать не нужно

Angular: как получить данные от апи и объявить переменные глобально?

Скопировал код в файл user.service.ts, добавив export: export class UserService {
Консоль браузера ругается на {{user.login}} в app.component.html. Редактор подсвечивает ошибку на private user$; :
Member 'user$' implicitly has an 'any' type, but a better type may be inferred from usage.
Член 'user$' неявно имеет тип 'any', но лучший тип может быть выведен из использования.

Angular: как получить данные от апи и объявить переменные глобально?

Антон Швец, спасибо. Попробую с новыми мыслями. Чирканите любые подсказки, кто бездельничает
1) Отдельный файл user.service.ts с запросом к базе мне не нужен
2) В корневом app.component надо здесь:
export class AppComponent {
Сделать запрос к апи
Присвоить переменные
Чтобы они были видны во всех компонентах
}

Помогите просто сделать запрос к апи при загрузке страницы и на переменные разобрать ответ. Чтобы можно было использовать их в разных компонентах

Angular: как получить данные от апи и объявить переменные глобально?

Антон Швец, а ты попробуй, хотя бы с малого
Правильно ли я вижу алгоритм?
1) Сервисом загружаю данные с сервера, присваиваю переменным значения
2) Загружаю сервис в главный модуль
3) В любом из компонентов, без дополнительных инклудов могу использовать переменные {{user.login}}

Angular: как получить данные от апи и объявить переменные глобально?

Это читал как раз сейчас, непонятно, как присвоить переменной, например, login значение из апи, а потом, отобразить в любом из шаблонов компонентов. Я совсем не понимаю typescript и не могу даже понять как в консоль отправить результаты своих эксперементов