Angular 6 — как настроить взаимодействие между компонентами?

Question

[Mantikore]

Изучаю Ангулар. Пишу приложение с авторизацией и возможностью создавать посты от своего имени. Есть общий компонент system - структура следующая:

<app-header></app-header>
<div class="left-menu">
       <app-login></app-login>
</div>
<div class=" main-section">
        <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

В левом меню форма для логина, обработчик написан, авторизация работает. При корректной авторизации создает переменную в localStorage с названием isLoggedIn. В router-outlet отображаются прочие странички, например, такие как список постов. Необходимо, чтобы при успешном логине сразу же, без перезагрузки страницы, появлялась кнопка добавления поста, на страничке списка постов или например в app-header. Пока я только в ngOnInit делаю проверку на переменную isLoggedIn, ну и соответсвенно на лету это не работает, а только после перезагрузки. Как сделать правильно?

Answer 1

[Антон Швец]

Самый простой способ - через сервис.
Создаете допустим AuthService, в нем ваша isLoggedIn в виде BehaviorSubject.
В корневом компоненте OnInit проверяете localStorage, и выставляете isLoggedIn, если нужно. Тож самое при логине.
А компоненты подписываются при инициализации или при помощи пайпа async.
И при изменении этого параметра компоненты перерисовываются, отрабатывают ваши ngIf

Comments

[Mantikore]

У меня получилось вытащить ивент логина во внешний system через @Output() и добавить в app-header этот ивент, с помощью @Input(), таким образом мой компонент app-header подписался на изменения в компоненте авторизации. Нормальное решение?

<app-header [isLoggedIn]="isLoggedIn"></app-header>
<div class="left-menu">
       <app-login (loginEmitter)="updateLoginStatus($event)"></app-login>
</div>
<div class=" main-section">
        <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

export class SystemComponent {
    isLoggedIn = Boolean(window.localStorage.getItem('isLogged'));
    updateLoginStatus($event: Event) {
        $event ? this.isLoggedIn = true : this.isLoggedIn = false;
    }
}

Но как этот ивент засунуть в router-outlet я не знаю, вроде бы нельзя эти инпуты использовать в router-outlet. Насчет BehaviorSubject в документации ничего не нашла. Если не сложно, киньте ссылочку, где прочитать как подписывать компонент на ивент в другом компоненте при помощи async и BehaviorSubject?

[Mantikore]

Всё нашла сама в https://angular.io/guide/component-interaction насчет обычных subject. Сработало на ура через сервис. Спасибо, за то что задали направление поиска =D

[Антон Швец]

Mantikore, с простым сабжектом могут быть проблемы, он не предназначен для хранения информации.
Допустим вы открываете сайт, ангуляр читает из локального хранилища токен юзера, делает isLoggedIn$.next(true), компоненты на главной получают данные о логине все ок.
Но тут загружается какой-нибудь лейзи модуль, его компонент инициализируется и он знать не знает ничего о пользователе, сабжект сработал еще до того, как лейзи компонент на него подписался и все, дальше в эфире тишина.
BehaviorSubject позволяет свое значение сохранить и выдать всем новым подписчикам.