Как связаться между двумя прямыми дочерними компонентами AppComponent через общий сервис в Angular?

Question

Итак, я прочитал, но не нашел решения своей проблемы. Мой вопрос, как мой заголовок спрашивает.

Вот моя проблема, я создал 2 компонента (NavbarComponent и HomepageComponent). NarbarComponent вложен в AppComponent и обрабатывает аутентификацию, в то время как HomepageComponent является компонентом с включенным маршрутом и страницей приложения по умолчанию.

Что я хочу сделать, так это иметь возможность использовать службу аутентификации, такую ​​как Auth0, для аутентификации пользователя, нажав кнопку "Вход" на навигационной панели (NavbarComponent), а затем отобразить его / ее профиль на домашней странице (HomepageComponent). И наоборот, когда я нажимаю кнопку "Выйти", содержимое профиля пользователя должно быть удалено.

Я попытался настроить несколько архитектур, но безрезультатно. Сначала я попробовал NavbarComponent для HomepageComponent с общим сервисом, но он обновляет HomepageComponent только после перезагрузки страницы.

Я попытался использовать общий сервис между AppComponent и NavbarComponent, а затем с помощью @Input() передать данные от родителя к ребенку, HomepageComponent.

Затем я попробовал @Output() и EventEmitter из NavbarComponent в AppComponent при запуске общего сервиса между AppComponent и HomepageComponent.

Любая информация или понимание будет принята с благодарностью!

ОБНОВЛЕНО

HomepageComponent

import { Component, OnInit } from '@angular/core'
import { Authenticated } from '../definitions/authenticated'
import { AuthCheckService } from '../shared/auth-check.service'

@Component({
  selector: 'afn-homepage',
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit{

  private authenticated: Authenticated;
  isAuthenticated: boolean;
  profile: any;

  constructor(public authCheckService: AuthCheckService) { }

  ngOnInit() {
    this.authCheckService.getAuthenticated().subscribe(authenticated => {
      console.log('Receiving auth info in home component from navbar component');
      this.authenticated = authenticated;
      this.isAuthenticated = this.authenticated.isAuthenticated;
      this.profile = this.authenticated.profile;
    });
  }

}

Я попытался сделать вантуз здесь. Я не смог загрузить его, но в нем есть большая часть кода и макет AuthService.

Answer 1

Я думаю, что вы хотите, это то, что работает в этом приложении.. https://angularhunt.com/

Пожалуйста, проверьте исходный код на https://github.com/aviabird/angularhunt. Он был построен поверх Angularfire2 с Redux(ngrx/store) для управления состоянием. Так что вам нужно сначала понять рабочий процесс редукса. Если вы уже знаете это, то это должно быть отличным справочником. Я посмотрю, смогу ли я найти один без редукционного пути.

Answer 2

Вам нужно внедрить сервис как в навигационную панель, так и в домашние компоненты. Когда пользователь нажимает кнопку "Вход в систему" ​​на панели навигации, вызывает установщик службы, который выполняет три действия:

1. выполнить аутентификацию
2. хранить учетные данные пользователя в переменной класса (например, пользователь) службы
3. используя EventEmitter, создайте событие, которое переносит пользовательский объект

Кроме того, определите метод получения в службе, который будет возвращать значение переменной user.

Домашний компонент получает тот же экземпляр службы, внедренный в конструктор. Подпишитесь на отправителя сервиса, чтобы получать уведомления, когда пользователь выходит из системы или снова входит в систему. В методе ngOnInit вызовите метод получения в службе, чтобы получить значение пользователя. Затем сделайте http-запрос, чтобы получить данные профиля пользователя.