Блог

У меня есть домашняя страница с многочисленными пунктами меню/вкладок, которые просто перенаправляют пользователя при нажатии, но у них должен быть доступ к пункту меню, на который они нажимают. Если они этого не сделают, это просто невозможно исправить. Эта функция работает, но я хотел бы выделить пункт меню серым цветом, если у пользователя нет доступа. Пожалуйста, смотрите пример:

 <div class="sidenav"> 
   <a 
     [ngClass]="{'menuitem': true,'activemenu':currentPage=='reporting' }" 
     [class.disabled]="!home.reportAccess" 
     (click)="navigateToPage('reporting',home.reportAccess)"  
     role="text">
       <img src=".assetsimagesmonotone_arrow_play_right_next1.png">Reporting
   </a>
</div>
 

Это просто проверяет компонент reportAccess, и если значение равно false, не разрешайте пользователю нажимать/перенаправлять на эту страницу. Я бы хотел создать серый подъем на эту вкладку, чтобы пользователь визуально знал, что он не может получить доступ к этой странице. Я хотел бы добавить это в дополнение к уже существующей реализации. У кого-нибудь есть какие-нибудь предложения? Кстати, я новичок в интерфейсной веб-разработке. 🙂

Заранее спасибо!

вы можете использовать то же логическое значение, чтобы добавить класс CSS для изменения цвета.

 <div class="sidenav"> 
   <a 
     [ngClass]="{'menuitem': true,'activemenu':currentPage=='reporting', !home.reportAccess ? 'disabled-style' : '' }" 
     [class.disabled]="!home.reportAccess" 
     (click)="navigateToPage('reporting',home.reportAccess)"  
     role="text">
       <img src=".assetsimagesmonotone_arrow_play_right_next1.png">Reporting
   </a>
</div>
 

С помощью ответа Саниры вот что я придумал:

 <div class="sidenav"> 
   <a 
     [ngClass]="{'menuitem': true,'activemenu':currentPage=='reporting','gray-nav': home.reportAccess==false }" 
     [class.disabled]="!home.reportAccess" 
     (click)="navigateToPage('reporting',home.reportAccess)" role="text">
     <img src=".assetsimagesmonotone_arrow_play_right_next1.png">Reporting
  </a>
</div>
 

CSS:

 .gray-nav {
      background-color: gray;
      pointer-events:none;
}
 

Это работает так, как задумано. Спасибо за помощь!