Примените класс начальной загрузки ко всем дочерним якорям в угловом компоненте

Question

Мне не удалось выполнить поиск в Google ...

Мой угловой компонент содержит логическую переменную isAuthenticated, которая изменяется на true / false в зависимости от состояния входа (в файле машинописи).

<div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block bg-light" >
        <a class="nav-link" routerLink="/" [ngClass]="isAuthenticated ? '' : 'disabled'">Overview</a>
        <a class="nav-link" routerLink="settings" [ngClass]="isAuthenticated ? '' : 'disabled'">Settings</a>
</div>

[ngClass]="isAuthenticated ? '' : 'disabled' повторяется для каждого тега привязки.

Что я могу сделать, чтобы написать оператор if только один раз ??

Answer 1

Вот способ применить принципы СУХОГО кодирования к вашим пунктам меню. В модели:

public get menuItems() {
  return [
    { path: '/', title: 'Overview' },
    { path: 'settings', title: 'Settings' }
  ];
}

В шаблоне:

<div id="sidebar-container">
  <a *ngFor="let item of menuItems"
     [routerLink]="[item.path]" 
     [ngClass]="['nav-link', { disabled: !isAuthenticated }]">
    {{item.title}}
  </a>
</div>

Answer 2

Вы можете сделать это, выполнив некоторые хаки css.

просто установите условный уникальный класс css в родительском div.

<div id="sidebar-container"  class="sidebar-expanded col-2 d-none  .  
 d-md-block bg-light" [ngClass]="!isAuthenticated ? '' : 'disabled'" >

добавьте ниже css в файле .css:

.disabled a{
  pointer-events: none;
  color : grey;
  cursor: not-allowed;
}

Как видите, CSS применяется ко всем дочерним якорям disabled class.

Рабочий пример

Answer 3

Вы можете написать свой код так -

<a class="nav-link" routerLink="/" [ngClass]="{'disabled': !isAuthenticated}">Overview</a>