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

说明：

您需要创建一个服务EventEmitterService，其中包含可从子组件访问的EventEmitter refreshTopHeaderMenuEventEmitter对象。
在AppComponent中，getRefreshTopHeaderMenuEventEmitter()将返回EventEmitter个对象。
每当我们需要刷新标头时，我们可以通过共享服务的emitTopHeaderMenuUpdatedEvent()从子设置此事件对象，如上所示，标头将被刷新。

Answer 2

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

SELECT "memberships".* FROM "memberships" WHERE "memberships"."user_id" IN ( SELECT "users"."id" FROM "users" WHERE "users"."skip_membership_renewal" = true )

使用'truthy'语句，您将使用上面链接的许多属性指令之一或 rolesArr.indexOf('admin') !== -1 根据admin是用户当前角色之一，确定模板上显示的内容和不显示内容。

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

2 个答案: