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

Когда пользователь авторизуется в Angular 2 приложении, возможно потребуется обновить header.component для отображения информации о пользователе, например, его имени или иконки профиля. В этом случае, вам потребуется использовать механизм обновления данных в дочерних компонентах.

1. Создайте сервис, который будет отвечать за хранение и обновление данных авторизации. Назовем его AuthService. Внутри сервиса, создайте переменную, которая будет хранить информацию о текущем пользователе:

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

@Injectable()
export class AuthService {
  public currentUser: any;

  public login(username: string, password: string): void {
    // Здесь выполняется авторизация и получение информации о пользователе
    // После успешной авторизации установите значения полей в объекте currentUser
    this.currentUser = { 
      username: 'JohnDoe', 
      role: 'admin' 
    };
  }

  public logout(): void {
    // Здесь выполняется процесс выхода из учетной записи
    // После выхода из учетной записи установите значения полей в объекте currentUser в null или пустую строку
    this.currentUser = null;
  }
}

2. Включите AuthService в header.component как зависимость:

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'path/to/auth.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  public currentUser: any;

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    // Получить текущего пользователя из AuthService
    this.currentUser = this.authService.currentUser;
  }
}

3. В компоненте авторизации, где пользователь будет вводить данные для входа, включите AuthService в зависимости и вызовите метод login:

import { Component } from '@angular/core';
import { AuthService } from 'path/to/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor(private authService: AuthService) { }

  public login(username: string, password: string): void {
    // Выполнить авторизацию, затем вызвать метод login сервиса AuthService
    this.authService.login(username, password);
  }
}

4. В header.component, добавьте в шаблон HTML код, который будет отображать информацию о текущем пользователе:

<div>
  <span *ngIf="currentUser">
    Welcome, {{ currentUser.username }}!
  </span>
  <span *ngIf="!currentUser">
    Please login.
  </span>
</div>

5. Когда пользователь успешно войдет в систему, авторизационная информация будет обновлена в сервисе AuthService, который будет автоматически обновлять данные currentUser в header.component благодаря тому, что он подписан на изменения сервиса.

Таким образом, при авторизации пользователя пользовательский интерфейс будет обновлен, и в header.component будет отображаться информация о текущем пользователе.