Идентификатор routerLinkActive в сочетании с [ngClass]

Ниже веб-ссылка демонстрирует работу идентификатора routerLinkActive при использовании в качестве логического значения для отдельного элемента HTML '[ngClass]
https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts

Напротив, идентификатор routerLinkActive не работает с экземпляром @ angular / material под веб-ссылкой, но ошибка исчезает путем комментирования строк 5 и 6, однако не исправляет удобство использования routerLinkActive id: https://stackblitz.com/edit/mat-routerlinkactive?file=src%2Fapp%2Fnav%2Fnav.component.html


angular-material directive routerlinkactive angular-ng-class
person Caesarius    schedule 11.03.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

у вашей второй ссылки много проблем, app-nav даже не используется, поэтому строк комментариев недостаточно, чтобы она работала.

но все таки

нет проблем с routerLinkActive, проблема в следующем:

<button mat-button color="white" fxHide.xs *ngIf="true">
  <span>
    <a routerLink="city-list" routerLinkActive="active-link citNgClassList" #rla_clist="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}">
      <mat-icon class="mr">maps_home_work</mat-icon>
      Cities
    </a>
  </span>
</button>

ваша ссылка находится внутри кнопки .. удалите кнопку, оставьте, и она работает

и какой смысл в * ngIf = true?

Изменить: вы можете оставить кнопку и убрать букву «а», если хотите сохранить стиль кнопки (но отображать ссылку как кнопку - это плохой юзабилити), просто поместите routerLink, routerLinkActive и routerLinkActiveOption на кнопку прямо

person JiBi    schedule 11.03.2021

arrow_upward
0
arrow_downward

Спасибо, ДжиБи, за твои наблюдения. Действительно, удаление материальной кнопки-обертки ссылок больше не приводит к ошибке во втором промежутке строки 5 ссылок StackBlitz, но это плохо влияет на всю страницу со стилем, нарушая гармонию страницы, что нелегко заменить. Я удалил некоторые комментарии, которые были оставлены на месте, чтобы дать легкое представление о том, что я пробовал. * NgIf = true кнопок должен был быть * ngIf =! Rla_clist или * ngIf =! Rla_cform, поэтому кнопка-отправитель ссылки не будет отображаться, если я нахожусь на самой ссылке, ..... но это еще одна проблема, лучшего решения которой я жду.

person Caesarius    schedule 11.03.2021