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

Question

angular2 的新手，我的 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>

这是 app.component.ts-

export class AppComponent {

  rolesArr: string[];

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

}

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

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

但我需要根据登录的用户角色更改标题上的选项卡视图。 就像数组包含管理员角色一样，都会显示。 在用户角色上，只会显示第一个选项卡。

Answer 1

可以通过@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 ，其中包含一个EventEmitter refreshTopHeaderMenuEventEmitter对象，该对象可从子组件访问。

2. 在AppComponent ， getRefreshTopHeaderMenuEventEmitter()将返回EventEmitter对象。

3. 每当我们需要刷新标题时，我们可以通过共享服务的emitTopHeaderMenuUpdatedEvent()从子级设置此事件对象，如上所示，标题将被刷新。

Answer 2

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

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

使用该“真实”语句，您将转到许多属性指令之一，例如上面链接的那些或[hidden] ，以便根据 admin 作为当前角色之一确定在您的模板上显示和不显示的内容用户。