angular2 содержания шоу шкуры заголовка на основе ролей пользователей

Question

Новых в angular2, Мой app.component.html выглядит как this-

<nav *ngIf="rolesArr.length>0" > 
<ul> 
    <li> 
    <a routerLink="home" class="sectionLink">Home</a> 
    </li> 
    <li> 
    <a routerLink="manage" class="sectionLink">manage</a> 
    </li> 
    <li> 
    <a routerLink="setting" class="sectionLink">setting</a> 
    </li> 
</nav> 
<router-outlet></router-outlet> 

<footer> ... </footer> 

и здесь app.component.ts-

export class AppComponent { 

    rolesArr: string[]; 

    constructor(private ps: PostsService, private roleS: Roles) { 
    this.rolesArr = roleS.getUserRoles(); 
    } 

} 

Итак, я использую угловую маршрутизацию, чтобы перемещаться между ссылками. включая логин. поэтому этот верхний и нижний колонтитулы загружаются изначально с помощью окна входа в систему. и поскольку пользователь не регистрируется в значении строкового массива roleArr пуст. это означает отсутствие вкладок. это нормально.

но когда пользователь успешно вошел в систему и перешел на другой компонент, содержимое изменений. и строковый массив roleArr получает что-то тоже.

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

Answer 1

Вы хотите посмотреть привязку к шаблону. Пожалуйста, рассмотрите ngSwitch и ngIf, чтобы справиться с такими вещами. Для вашего примера роли администратора, вы хотите посмотреть на массиве ролей, чтобы определить, является ли роль администратора присутствует, может быть, с помощью

rolesArr.indexOf('admin') !== -1

С помощью этого «truthy» заявления, вы собираетесь одна из многих директив атрибутов, подобных приведенным выше, или [hidden] , чтобы определить, что отображает и не отображает на вашем шаблоне, на основе того, что admin является одной из текущих ролей для пользователя.

Answer 2

Это может быть достигнуто @Output и общими услугами.

Создание службы испускать событие изменения заголовка:

import { Injectable , Output, EventEmitter } from '@angular/core'; 

@Injectable() 
export class EventEmitterService { 
    @Output() refreshTopHeaderMenuEventEmitter: EventEmitter<any> = new EventEmitter(); 

    public emitTopHeaderMenuUpdatedEvent(parameters) { 
    this.refreshTopHeaderMenuEventEmitter.emit(parameters); 
    } 

    public getRefreshTopHeaderMenuEventEmitter() { 
    return this.refreshTopHeaderMenuEventEmitter; 
    } 
} 

В приложении компонента:

import { Component, OnInit } from '@angular/core'; 
import { TranslateService } from '@ngx-translate/core'; 

import { EventEmitterService } from './event-emitter.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent implements OnInit { 

    constructor(public _eventEmitterService: EventEmitterService) { } 

ngOnInit() { 
this._eventEmitterService.getRefreshTopHeaderMenuEventEmitter().subscribe(callBack => { 
     console.log('refresh header'); 
    }); 
    } 
} 

Изменение заголовка из внутреннего компонента:

import { Component, OnInit } from '@angular/core'; 
import { EventEmitterService } from './event-emitter.service'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent implements OnInit { 

    constructor(public _eventEmitterService: EventEmitterService) { } 

    ngOnInit() { } 

    changeHeader(){ 
    this._eventEmitterService.emitTopHeaderMenuUpdatedEvent(false); 
    } 
} 

Объяснение:

1. Вам необходимо создать услугу EventEmitterService, которая содержит объект EventEmitterrefreshTopHeaderMenuEventEmitter, который доступен из дочерних компонентов.

2. В AppComponent, getRefreshTopHeaderMenuEventEmitter() будет возвращен объект EventEmitter.

3. Всякий раз, когда нам нужно обновить заголовок, мы можем установить этот объект события из дочернего объекта на emitTopHeaderMenuUpdatedEvent() общей службы, как показано выше, и заголовок будет обновлен.