Angular 8. Как я могу нажать кнопку «Вход» на странице входа и отобразить имя пользователя на компоненте Navbar на следующей странице?

Question

Моя страница имеет 3 компонента, компонент Navbar, компонент меню и компонент входа в систему. App.component. html выглядит следующим образом:

<app-navbar></app-navbar>

<router-outlet></router-outlet> 

Компонент входа в систему и меню будет отображаться в "router-outlet", Navbar будет отображаться в "app-navbar". Когда я введу имя пользователя и пароль и нажму кнопку «Отправить», в случае успешного входа я перенаправлю «выход-маршрутизатор» из компонента «Вход в систему» ​​в компонент «Меню». Я хочу, чтобы когда появился компонент Меню, я увидел имя пользователя и фамилию на панели навигации под заголовком в центре новой строки. Примерно так:

Это HTML для Navbar:

<nav class="navbar rf-scanner-navbar">
  <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
    <h1>{{ title }}</h1>
  </div>
  <br>
  <div *ngIf="currentUserInfo" class="row">
    <p class="userInfo">{{currentUserInfo.firstname}} {{currentUserInfo.lastname}}</p>
  </div>
</nav>

Проблема в том, что мне нужно refre sh вся страница, чтобы принудительно перезагрузить навигационную панель для отображения имени. В любом случае я могу сделать так, чтобы компонент Navbar мог обнаруживать измененные данные и отображать их?

Это код TS для компонента Navebar, я ввел инъецируемый файл authService, который будет вызывать Api для получить информацию о пользователе:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../_services/auth.service';
import { User } from '../_models/user';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  title = 'hello-world';
  currentUserInfo = this.authService.currentUserValue;

  constructor(
    private authService: AuthService,
  ) { }

  ngOnInit() {
  }

}

У меня также есть этот метод publi c в файле службы аутентификации:

  public get currentUserValue(): User {
    return this.currentUserSubject.value;
  }

Еще один вопрос, как сделать имя Div в центре новая строка под заголовком ("привет-мир")? Пока они находятся на одной строке,
не работает, я сфотографировал фото выше.

Дайте мне знать, если вам нужна дополнительная информация об этом.

Answer 1

Вы можете напрямую использовать свойство authService:

<div *ngIf="authService.currentUserValue" class="row">
    <p class="userInfo">{{authService.currentUserValue.firstname}} {{authService.currentUserValue.lastname}}</p>
  </div>

Значение будет обновляться так же, как значение службы.

Чтобы центрировать div на новой строке, попробуйте переместить его чуть ниже тег h1:

<nav class="navbar rf-scanner-navbar">
  <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
    <h1>{{ title }}</h1>
    <div *ngIf="currentUserInfo" class="row">
      <p class="userInfo">{{currentUserInfo.firstname}} 
        {{currentUserInfo.lastname}}
      </p>
    </div>
  </div>
</nav>

Поместите 'text-align: center' в класс / стиль.