Отображать имя пользователя и роль на каждой странице Angular 2

Вы можете создать сервис, который удерживает вашего пользователя. У меня есть пример: https://github.com/DeborahK/Angular-Routing

Вот один из его фрагментов:

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

import { IUser } from './user';
import { MessageService } from '../messages/message.service';

@Injectable()
export class AuthService {
    currentUser: IUser;
    redirectUrl: string;

    constructor(private messageService: MessageService) { }

    isLoggedIn(): boolean {
        return !!this.currentUser;
    }

    login(userName: string, password: string): void {
        if (!userName || !password) {
            this.messageService.addMessage('Please enter your userName and password');
            return;
        }
        if (userName === 'admin') {
            this.currentUser = {
                id: 1,
                userName: userName,
                isAdmin: true
            };
            this.messageService.addMessage('Admin login');
            return;
        }
        this.currentUser = {
            id: 2,
            userName: userName,
            isAdmin: false
        };
        this.messageService.addMessage(`User: ${this.currentUser.userName} logged in`);
    }

    logout(): void {
        this.currentUser = null;
    }
}

Ключевой частью для вас является свойство currentUser.

ПРИМЕЧАНИЕ. Это пример приложения, поэтому информация о пользователе жестко запрограммирована. Вам нужно будет получить фактические данные.

ОБНОВЛЕНИЕ: при доступе к currentUser из компонента обязательно используйте геттер. Это гарантирует, что вы всегда получите текущее значение, если оно будет изменено. Я получаю доступ к имени текущего пользователя в моем MenuComponent, поэтому код выглядит так:

  get userName(): string {
    return this.authService.currentUser.userName;
  }

Если вам нужен весь пользовательский экземпляр, используйте что-то вроде этого:

  get user(): IUser {
    return this.authService.currentUser;
  }