angular2根据用户角色显示标题的隐藏内容

对于angular2来说，My app.component.html看起来像这样-

<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>

所以我使用角度路由在链接之间导航。包括登录。所以这个导航页眉和页脚最初是通过登录窗口加载的。当用户未登录时，字符串数组rolesar的值为空。这意味着没有标签。没关系

但当用户成功登录并移动到另一个组件时，组件的内容会发生变化。字符串数组rolesArr也得到了一些东西

---

但我需要根据登录的用户角色更改标题上选项卡的视图。例如，如果数组包含管理员角色，则所有角色都将显示。在用户角色上，只显示第一个选项卡。

您想查看模板绑定。请考虑和处理这类事情。对于管理员角色的示例，您需要查看角色数组以确定是否存在管理员角色，可以使用

rolesArr.indexOf（'admin'）！=-1

使用“truthy”语句，您将看到许多属性指令中的一个，如上面链接的或

[隐藏]

---

根据管理员是用户当前角色之一，确定模板上显示和不显示的内容

可以通过

@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 { 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);
  }
}

说明：

您需要创建一个服务

EventEmitter服务

，其中包含可从子组件访问的

EventEmitter

RefreshTopHeaderManueEventEmitter

对象

在

AppComponent

中，

getRefreshtTopHeaderMinueEventEmitter（）

将返回

EventEmitter

对象

每当我们需要刷新头部时，我们可以通过共享服务的

emittopHeaderManuUpdateEvent（）

从child设置此事件对象，如上所示，头部将被刷新

---

告诉RoleSAR中有哪种数据？显示您的登录组件/功能。@micronyks RoleSAR是一个字符串数组（或简单的一个字符串）。逻辑类似于如果包含字符串“admin”，则显示所有三个选项卡，如果包含字符串“manager”，则仅显示两个选项卡。如果它的用户只显示第一个。我对if条件并没有问题。问题是，当用户从一个路由移动到另一个路由时，我无法刷新标题内容（显示/隐藏）。我明白了，因为这是不可能的。听起来您需要主要的应用程序组件来了解您的用户角色。

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);
  }
}