Question

我已经使用原生html和css创建了标签，如果特定用户登录，我想使用* ngIf禁用某些标签。目前，我点击下一个标签后无法切换回来，它将我转发到我的应用程序的起始站点。我做错了什么？

HTML标签

<div class="col-lg-8  bhoechie-tab-menu">
       <div class="list-group" (click)="callMap();">
          <a href="#" class="list-group-item text-center active " *ngIf="username == 'admin'>
             <h4 class="glyphicon glyphicon-globe"></h4>
             <br/>Test1
          </a>
          <a href="#" class="list-group-item text-center "  >
             <h4 class="glyphicon glyphicon-eye-open" ></h4>
             <br/>Test2
          </a>
          <a href="#" class="list-group-item text-center" >
             <h4 class="glyphicon glyphicon-dashboard"></h4>
             <br/>Test3
          </a>
       </div>
    </div>

<div class="col-lg-12 " >
   <div class="bhoechie-tab">
      <div class="bhoechie-tab-content active " >
         <p>Test
         </p>
      </div>
   </div>
</div>
<div class="col-lg-12 bewerten" >
<div class="bhoechie-tab">
   <div class="bhoechie-tab-content  ">
<p>Test2<p>
   </div>
</div>
</div>

CSS

/* Sidebar Styles */

.sidebar-nav {
    position: fixed;
    top: 0;
    width: 240px;
    padding: 0;
    list-style: none;
    height:100%;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;

}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #4d4d4d;
;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}



div.bhoechie-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
  /*margin-bottom: 0;*/
}
div.bhoechie-tab-menu div.list-group>a{
  /*margin-bottom: 0;*/
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
  color: #FF7F50;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
  background-color: #FF7F50;
  border-color: #FF7F50;
  color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #FF7F50;
}

Angular2组件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Http, Headers } from '@angular/http';
import {Observable} from 'rxjs/Rx';
declare var $:



@Component({
  selector: 'sidebar',
  styleUrls: ['./sidebar.component.css'],
  templateUrl: './sidebar.component.html'
})

export class SidebarComponent implements OnInit {
  map:any;
 username:any;


constructor(public apiService:APIService, public apiServiceMapEntire:APIGoogleEntireService){}

ngOnInit(){
this.clickedMenu();
this.username = JSON.parse(localStorage.getItem('currentUser')).username;
// console.log(localStorage.getItem('currentUser'));


}
}

Answer 1

您的代码存在的问题是，只有在您的组件的ngOnInit（）期间才会获取用户名。有一段时间，用户可能还没有登录。

我会这样做：

模板：

      <a href="#" class="list-group-item text-center active " *ngIf="isAdmin()">
         <h4 class="glyphicon glyphicon-globe"></h4>
         <br/>Test1
      </a>

成分：

private isAdmin() {
    let user = JSON.parse(localStorage.getItem('currentUser'));
    return user && user.userName === 'admin';   // In that way, I won't have an error if the user is not in localStorage
}

选项卡切换回不使用* ngIf oder隐藏

1 个答案: